(入门)使用webpack 4.x定制自己的react开发环境-白红宇

概述webpack配置，以及插件的使用和介绍

推荐升级webpack4，总结一下优势。

webpack 4 更快（速度提升98%）！

Mode, 零配置以及默认值在配置中需要加上 --mode development 或者是--mode production 来标注你的开发环境不加会warn不报错

WebAssembly 支持

支持 webpack 4。甚至最流行的库例如 lodash-es, RxJS 已经支持 sideEffects 选项，因此使用它们的最新版后你会发现打包体积会大幅度的减小。

太多了，详细请移步

工欲善其事必先利其器

温馨tips：默认已经装好node开发环境，版本不低于6.11。下载node->>>> 我这里使用的yarn来进行环境搭建。语法和npm差别不大。

npm install -g yarn        //创建目录  webpackEnv        //进入webpackEnv  yarn init，创建工程化目录已经一些信息，可以直接enter，项目目录下会自动生成package.json        yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 style-loader css-loader less-loader file-loader url-loader html-webpack-plugin  babel-preset-react webpack-cli --dev        or        npm install webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 style-loader css-loader less-loader file-loader url-loader html-webpack-plugin  babel-preset-react webpack-cli --save-dev        复制代码

package.json里面就是这些依赖包(文章最后我会解释一下这些包的作用)

{  "name": "zhReactNEW",  "version": "1.0.0",  "main": "index.js",  "license": "MIT",  "devDependencies": {    "babel-core": "^6.26.0", //编译源码到其他源码 babel主要工作的核心模块    "babel-loader": "^7.1.4",//babel加载其他loader的主要模块                                //babel-preset 系列打包了一组插件    "babel-preset-es2015": "^6.24.1", //打包了 es6 的特性    "babel-preset-react": "^6.24.1",//编译react  jsx的文件    "babel-preset-stage-0": "^6.24.1",//S7一些提案的支持，Babel通过插件的方式引入，让Babel可以编译ES7代码    "css-loader": "^0.28.11",   //css的兼容前缀prefx都会自动处理 配合style-loader使用    "file-loader": "^1.1.11",//引入其他文件    "html-webpack-plugin": "^3.2.0",//引入html模板    "less-loader": "^4.1.0", //编译less    "style-loader": "^0.20.3", //css文件作为

准备工作已经做好，开始配置环境

进入webpackEnv，此时有package.json，node_modules,yarn.lock。在当前位置创建index.html(如页面入口)和一个src文件夹(用来存放源文件)

创建webpack.config.js 来进行关键的 webpack配置。webpack.config.js文件通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块。

1，首先要暴露出一个模块,这是webpack去引入的配置，作为模块开发最基本的东西。    module.exports  = {            }    2，定义主文件的入口和最终打包的位置已经名字。    let path = require('path');//这里需要引用path这个模块    module.exports  = {        entry:"./src/index.js",//webpack打包入口js文件，我在src下面创建了一个index.js        output:{            filename:'bundle.js',//打包输入文件的名字            path:path.resolve('./dist'),//这里需要引入node内置的模块path，path.resolve方便我们解析路径片段(./dist)为绝对路径        }    }        3，module--模块的加载相关，我们就定义在module.rules(为什么不是loaders，下面有解释)中。这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器。比如说给less文件定义串联的三个加载器：    module.exports  = {        ...        module:{            rules:[                {                    test:/\.js$/,                    use:"babel-loader",                    exclude:/node_modules/                },                {                    test:/\.css$/,                    use:["style-loader","css-loader"],                },                {                    test:/\.less$/,                    use:["style-loader","css-loader","less-loader"],                }            ]        },    }    复制代码

有人问我为什么不是。module.loaders，这也算webpack升级的一个改进，因此这里为了避免兼容问题，小伙伴还是使用rules.好一点

同时介绍一个插件html-webpack-plugin 作用：这里同时会使用一个插件来渲染主页面html，简单做一个介绍简化了html文件的创建，同时会把打包的webpack其他文件自动引入到html中,使用起来还是非常舒服的

...    let HtmlWebpackPlugin = require('html-webpack-plugin')    module.exports = {        ...        plugins:[            new HtmlWebpackPlugin({                template:'./index.html'            })        ]    }复制代码

最后配置一个Babel的presets配置,这里是来配置babel中的解析规则，创建一个.babelrc文件

//"presets":["babel-preset-es2015","babel-preset-stage-0","babel-preset-react"]  这里babel-preset是可以省略不写的    "presets":["es2015","stage-0","react"]复制代码

我们现在来说明下这个配置文件是什么意思。首先，这个配置文件是针对babel 6的。Babel 6做了一系列模块化，不像Babel 5一样把所有的内容都加载。比如需要编译ES6，我们需要设置presets为"es2015"，也就是预先加载es6编译的相关模块，如果需要编译jsx，需要预先加载"react"这个模块。那问题来了，这个"stage-0"又代表什么呢？

事实上， ”stage-0"是对ES7一些提案的支持，Babel通过插件的方式引入，让Babel可以编译ES7代码。当然由于ES7没有定下来，所以这些功能随时肯能被废弃掉的。

这里大体上就已经给webpack配置完毕了。

在src/index.js中加入一些内容来添加主文件。

alert(1);复制代码

见证奇迹的时候，

wait:在命令窗里输入webpack太low 我们来配置一下快捷命令

打开pakepage.json

{    ...  "scripts": {    "dev": "webpack-dev-server --mode development",    "build": "webpack --mode production"  }}复制代码

这里配置scripts 之后就可以用 npm run *** (dev/build) 来启动webpack-dev-server 或者build了为什么后面要加--mode development/production 这里也是webpack4的一些优化，制定开发环境不写默认是development，会用warn警告但不会报错。

激动人心的时刻来了 执行 npm run dev 浏览器打来 localhost:8080

页面是否alert(1),,此时，一个webpack开发环境我们已经搭建好了。

如果想了解简单开发一个react jsx 请再耽误您几分钟时间

我们需要安装 react react-dom 俩个包。

yarn add react react-dom --dev    复制代码

我们还需要配置webpack支持我们编译jsx文件

//原来的编译js配置 添加一下jsx (为什么直接添加就可以，我们再babel里面配置了编译react，因此直接添加就可以了)   //修改之前的            {                test:/\.js$/,                use:"babel-loader",                exclude:/node_modules/            },                //修改之后的                {                test:/\.(js|jsx)$/,                use:"babel-loader",                exclude:/node_modules/            },       复制代码

修改一下我们的入口文件在src/index.js中加入一些内容来添加主文件，在里面引入随便写的一个react组件。 //index.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';ReactDOM.render(
    , document.getElementById('root'));复制代码

同级目录下创建一个app.jsx的文件 //app.jsx

import React, { Component } from 'react';class App extends Component {    render() {        return (            
    
                     hello,webpack            
    
        );    }}export default App;复制代码

此时，重新执行一下 npm run dev，打开浏览器 localhost:8080 是不是已经出现了内容，然后我们就可以进行我们需要的react开发了。

只有非常努力，才能看起来毫不费力