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 做为后台的虚拟服务器上，这样也能够实现不少开发的便利，好比热更新，浏览器实时刷新

主要参数