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 作为后台的虚拟服务器上，这样也可以实现很多开发的便利，比如热更新，浏览器实时刷新

主要参数