webpack4配置react开发环境

webpack4大大提高了开发效率，简化了配置复杂度，作为一个大的版本更新，作为一个对开发效率执着的爱折腾的程序员，已经忍不住要尝尝鲜了

首先是cli和webpack的分离，开发webpack应用程序需要安装一些开发依赖

webpack

webpack-cli

webpack-dev-server

babel-loader, babel-core, babel-preset-env, babel-preset-react

css-loader less-loader style-loader less （ 如果是sass的话安装 sass-loader和node-sass ）

file-loader

 yarn add webpack webpack-cli webpack-dev-server less less-loader style-loader css-loader babel-loader babel-core babel-preset-react babel-preset-env file-loader --save --dev

安装好之后开始配置webpack

mode

4.0版本添加了一个mode参数

development 或者 production，直接设置这两个参数，可以省去配置一些插件，但是也可以设置为 none，插件也可以自己手动配置

如果是development的话，相当于旧版本的

plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("development") }),
]

如果是production 的话，相当于旧版本的

plugins: [
    new UglifyJsPlugin(/* ... */),
    new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("production") }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
]

入口和出口

旧版本中需要配置入口文件和出口文件，新版本如果不执行入口和出口，那么默认的配置就会和下边一样

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js'
    }
}

零配置

因为很多都有默认值了，所以我们可以实现零配置

以上我们可以认为通过如下命令来实现

webpack --mode=development

loader

略有些复杂的loader配置可能会比较麻烦，如果用命令行实现也可以，但会执行一条很长的命令

注意loader的顺序是不能乱的，比如css 需要先通过 css-loader 然后 style-loader写到页面内， 也就是说在 use 里是反着写的

　　module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(js|jsx)$/,
                use: ['babel-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: ['file-loader']
            }
        ]
    }

devServer

webpack-dev-server 可以快速让网站运行在一个 express 作为后台的虚拟服务器上，这样也可以实现很多开发的便利，比如热更新，浏览器实时刷新

主要参数