新手webpack入门(react入门)配置环境...

webpack安装环境

环境

node.js v10+
windows 64bit

创建react-stack项目

npm init -y 生成package.json文件

cnpm install webpack -g
cnpm install webpack-cli -g

cnpm install webpack -D
cnpm install webpack-cli -D

创建webpack的配置文件，建议命名为webpack.config.js

编写配置文件

1、设置入口文件:enter选项

entry:path.resolve(__dirname,'./src/main.js')

2、设置出口:output选项

 output:{
        filename:'[name].[hash].js', //一束
        path:path.resolve(__dirname,'dist')
    }

打包命令：

如果命名为webpack.config.js
就直接在命令行运行：webpack
如果设置的比如react.config.js
就可以在package.json的scripts中加上
“bulid”:“webpack --config react.config.js”
然后在命令行运行：npm run bulid

使用plugins

1、html-webpack-plugin
它的作用是自动生成一个index.html单页面，并且打包后，js脚本文件插入进去
安装:cnpm install html-webpack-plugin -D

plugins:[
    new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'./public/index.html'),
        title:'我们'
    })
]

2、clean-webpack-plugin
它的作用是自动删除目录中的dist文件夹

搭建devServer

cnpm install webpack-dev-server -g
cnpm install webpack-dev-server -D

devServer:{
    port:'8090',
    open:true,
    contentBase:path.resolve(__dirname,'./public'),
}

开启热更新

HMR作用是：局部代码发生变化时，不用刷新页面即可自动更新，速度比较快

1、在devServer中，添加 ‘hot:true’
2、引入webpack模块，添加两个plug模块

new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()

使用sass/css

cnpm install style-loader -D
cnpm install css-loader -D
cnpm install node-sass -D

module:{
    rules:[
        {
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
        }
    ]
}

提示：如果node-sass安装失败，建议把node_modules整个目录删掉，重新cnpm install

使用JS

Babel ，JS编译器 把ES6转换成浏览器能够兼容的ES6代码

cnpm install babel-loader -D
cnpm install @babel/core -D

rules:[
 {test:/\.(css|scss)$/,use:['style-loader','css-loader','sass-loader']},
  {test:/\.js$/,use:['babel-loader'],exclude:/node_modules/},
]

在devServer中添加
overlay:{
errors:true
}
可以让报错信息覆盖在视图上面

使用ESLint

ESLint 用于规范JS代码保持一定的风格，便于协同开发

cnpm install eslint-loader -D
cnpm install eslint -D
手动新建一个ESLint配置文件， .eslintrc.json，里面配置如下

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        // "no-console":"error", //设置了的话就不能出现console.log,否则会报错
        // "semi":"error" //设置了的话代码就一定要加分号,否则会报错
    }
}

可以去官网：https://eslint.bootcss.com/ 里面有好多配置选项

区分开发环境和生产环境

cnpm install cross-env -D
在package.json中配置命令，如下：

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "serve": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
    "start": "npm run serve"
  },

在webpack.config.js中，使用’process.env.NODE_ENV’来分别配置我们的webpack

react安装

cnpm install react -S
cnpm install react-dom -S

第一步：新建一个App.js里面封装react根组件

import React from 'react'
class App extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div>
                <h1>Hello React</h1>
            </div>
        )
    }
}

export default App

第二步：把组件渲染到真实的DOM节点

import React from 'react'
import ReactDom from 'react-dom'

import App from './APP'
ReactDom.render(<App />,document.getElementById('app'))

第三步：安装Babel插件
cnpm install @babel/preset-react -D 支持jsx语法的babel
cnpm install @babel/preset-env -D 支持ES6中教新的语法

第四步：创建一个babel的配置文件，命名为 .babelrc.json
配置：

{
    "presets": [
        ["@babel/preset-react"],
        ["@babel/preset-env",{"useBuiltIns": "entry"}]
    ]
  }

第五步：在public文件夹下面创建一个index.html

<div id="app">
        <h1 class="hello">哈喽，webpack</h1>
        <div class="box">
            <h2>hello react</h2>
        </div>

    </div>

最后，在终端执行代码