Webpack4后包拆成webpack和webpack-cli两个包：

  1. // 安装webpack
  2. npm install --save-dev webpack webpack-cli

主要有以下这些一级配置：

  1. module.exports = {
  2.     mode: 'development', // 模式配置,webpack4.0新增
  3.     entry: '', // 入口文件
  4.     output: {}, // 出口文件
  5.     module: {
  6.         rules: [/*loader setting*/]
  7.     }, // 配置modules，包括loader
  8.     plugins: [], // 对应的插件
  9.     devServer: {}, // 开发服务器配置
  10.     optimization: {}, // 最佳实践
  11.     devtool: '',
  12.     resolve: { alias: {}},
  13. }

1. mode

Webpack 4 引入了 mode 这个选项。这个选项的值可以是 development 或者 production。 设置了 mode 之后会把 process.env.NODE_ENV 也设置为 development 或者 production。然后在 production 模式下，会默认开启 UglifyJsPlugin 等一堆插件。
webpack4支持ES6的方式导入JSON文件，并且支持Tree-shaking


2. entry/output

默认的入口为’./src/‘和默认出口’./dist’。

3. mudule - rules - loader配置

webpack4中移除loaders配置，必须使用rules。rules 配置模块的读取和解析规则， 通常用来配置loader， 其类型是一个数组， 数组里每一项都描述了如何去处理部分文件。
配置一项rules大致通过以下方式：

  1. 条件匹配： 通过test、include、exclude三个配置来命中Loader要应用的规则文件。(三个配置都可以是正则，也支持数组)
  2. 应用规则： 对选中后的文件通过use配置项来应用loader，可以应用一个loader或者按照从后往前的顺序应用一组loader。同时还可以分别给loader传入参数。
  3. 重置顺序： 一组loader的执行顺序默认是从右到左执行，通过exforce选项可以让其中一个loader的执行顺序放到最前或者是最后。 ```json module: { rules: [
    1.  {
    2.      test: /\.m?js$/,
    3.      exclude: /node_modules/,
    4.      use: {
    5.          loader: 'babel-loader',
    6.          options: {
    7.              presets: ['@babel/preset-env']
    8.          }
    9.      }
    10.  },
    11.  {
    12.      test: /\.scss$/,
    13.      use: ['style-loader', 'css-loader', 'sass-loader'],
    14.      exclude: path.resolve(__dirname, 'node_modules')
    15.  }
    ] }
  1. 常用loader：（待补充）
  3. - css
  4.    - style-loader
  5.    - css-loader
  6.    - postcss-loader
  7.    - sass-loader
  8. <a name="Uik4z"></a>
  9. ## 4. optimization
  10. 在Webpack4中引入，根据mode（production/development）的不同，配置项默认值不同，具体有以下：
  12. 1. optimization.minimize： 是否自动压缩打包后的代码。mode = production时，为true。压缩默认使用uglifyjs-webpack-plugin插件，如果想要使用别的压缩插件，可以使用optimization.minimizer设置。
  13. 1. optimization.splitChunks: 根据不同的策略来分割打包出来的bundle。配置基于[SplitChunksPlugin(opens new window)](https://webpack.js.org/plugins/split-chunks-plugin/),剔除了老的CommonsChunkPlugin（webpack4移除）。
  14.    - optimization.splitChunks.chunks: async/all/initial
  15. 3. 零配置
  16.    - optimization.nodeEnv: 告诉webpack process.env.NODE_ENV的值，值来自于mode的取值。代替[webpack.DefinePlugin(opens new window)](https://webpack.js.org/plugins/define-plugin/)（webpack4移除）
  17.    - optimization.namedModules: 代替webpack.NamedModulesPlugin（webpack4移除）
  18.    - optimization.noEmitOnErrors: 代替webpack.NoEmitOnErrorsPlugin（webpack4移除）
  19.    - optimization.concatenateModules: 代替webpack.optimize.ModuleConcatenationPlugin（webpack4移除）
  20. <a name="FBmPY"></a>
  21. ## plugins
  23. - 常用插件
  24.    1. HtmlWebpackPlugin 自动在html中加载打包后的js文件
  25.    1. DLLPlugin/DllReferencePlugin 提高打包速度
  26.       - DLLPlugin：创建一个只有dll的bundle
  27.       - DllReferencePlugin： 打包生成的dll文件引用到需要的预编译依赖上来
  28.    3. happyPack 多进程打包，加快打包速度。
  29.    3. webpack.DefinePlugin webpack4设置mode会自动使用
  30.    3. uglifyjs-webpack-plugin webpack4 mode = production默认使用
  31. - 废弃插件
  32.    1. CommonsChunkPlugin 拆分依赖包，生成单独文件，使得文件大小减小。在webpack4被废弃，替代optimization.splitChunks
  33.    1. ExtractTextWebpackPlugin 拆分css样式的插件(webapck4已废弃)。由于webpack4以后对css模块支持的逐步完善和commonchunk插件的移除，在处理css文件提取的计算方式上也做了些调整，之前我们首选使用的extract-text-webpack-plugin也完成了其历史使命，将让位于[mini-css-extract-plugin(opens new window)](https://github.com/webpack-contrib/mini-css-extract-plugin)。
  34. <a name="WcKoi"></a>
  35. ## <br />devServer
  36. 详见[Webpack4 devServer配置详解](https://lq782655835.github.io/blogs/project/webapck4-2.devServer.html)<br />举个完整例子：
  37. ```json
  38. const path = require('path');
  39. const webpack = require('webpack');
  40. // 插件都是一个类，所以我们命名的时候尽量用大写开头
  41. const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html
  42. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 提取出来css
  43. const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 压缩打包后的js 
  44. const HappyPack = require('happypack'); // 多线程构建
  45. const happyThreadPool = HappyPack.ThreadPool({ size: 5 });  // 构造出共享进程池，进程池中包含5个子进程
  46. const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')// 最大化压缩css
  48. console.log('process.env.NODE_ENV------->',  process.env.NODE_ENV)
  49. // 解决css 分离后图片引入路径不正确问题
  50. if (process.env.type == 'build') { // 判断package.json里面是build还是dev命令
  51.     // 开发
  52.     var website ={
  53.         publicPath:"/"
  54.     }
  55. } else {
  56.     // 生产
  57.     var website ={
  58.         publicPath:"/"
  59.     }
  60. }
  63. module.exports = {
  64.     // devtool:'eval-source-map',
  65.     mode: 'development', // 模式配置
  66.     entry: {
  67.         main: './src/index.js',
  68.     },             
  69.     output: {
  70.         filename: 'bundle.[chunkhash:6].js',
  71.         path: path.resolve(__dirname, 'dist'),
  72.         publicPath: website.publicPath, // 解决css 分离后图片引入路径不正确问题
  73.     },             
  74.     module: {
  75.         rules: [
  76.             {
  77.                 test: /\.css/,
  78.                 exclude: /node_modules/,
  79.                 use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],
  80.             },
  81.             {
  82.                 test: /\.less$/,
  83.                 exclude: /node_modules/,
  84.                 use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
  85.             },
  86.             {
  87.                 test: /\.(png|jpe?g|gif|svg)$/,
  88.                 use: [
  89.                     {
  90.                         loader: 'url-loader',
  91.                         options: {
  92.                             limit: 10000,
  93.                             name: '[name]_[hash:7].[ext]', 
  94.                             outputPath:'static/images/'
  95.                         }
  96.                     }
  97.                 ]
  98.             },
  99.             {
  100.                 test: /\.(htm|html)$/,
  101.                 use: 'html-withimg-loader'
  102.             },
  103.             // babel 解析es7 es6 jsx
  104.             {
  105.                 test:/\.(jsx|js)$/,
  106.                 include: [ 
  107.                     path.resolve(__dirname, 'src'),
  108.                 ],
  109.                 use:['babel-loader'],
  110.                 /*
  111.                     如果开启多线程进行构建
  112.                     use:['happypack/loader?id=js'], 
  113.                     loader这样写 匹配下面注释的插件
  114.                 */
  115.                 exclude:/node_modules/
  116.             },
  117.         ]
  118.     },              
  119.     plugins: [
  120.         // 打包html
  121.         new HtmlWebpackPlugin({
  122.             template: './src/index.html',
  123.             hash: true,
  124.             minify: {
  125.                 minifyCSS: true,
  126.                 minifyJS: true, 
  127.                 removeAttributeQuotes: true
  128.             },
  129.         }),
  130.         new MiniCssExtractPlugin({
  131.             filename: "static/css/[name].[chunkhash:8].css",
  132.             chunkFilename: "[id].css"
  133.         }),
  134.         new UglifyJsPlugin({
  135.             parallel: true, 
  136.         }),
  137.         new webpack.DefinePlugin({
  138.             NODE_ENV: JSON.stringify('DEV')
  139.         }),
  140.         // 多线程构建 匹配上面的loader
  141.         // new HappyPack({
  142.         //     id: 'js',
  143.         //     //threads: 4,
  144.         //     loaders: ['babel-loader'],
  145.         //     threadPool: happyThreadPool, // 使用共享进程池中的子进程去处理任务
  146.         // }),
  147.     ],   
  148.     // 提取公共代码
  149.     optimization: {
  150.         minimizer: [
  151.            // 自定义js优化配置，将会覆盖默认配置 最大化压缩成js
  152.             new UglifyJsPlugin({
  153.                 exclude: /\.min\.js$/, // 过滤掉以".min.js"结尾的文件，我们认为这个后缀本身就是已经压缩好的代码，没必要进行二次压缩
  154.                 cache: true,
  155.                 parallel: true, // 开启并行压缩，充分利用cpu
  156.                 sourceMap: false,
  157.                 extractComments: false, // 移除注释
  158.                 uglifyOptions: {
  159.                   compress: {
  160.                     unused: true,
  161.                     warnings: false,
  162.                     drop_debugger: true
  163.                   },
  164.                   output: {
  165.                     comments: false
  166.                   }
  167.                 }
  168.             }),
  169.             // 用于优化css文件 最大化压缩成css 并且去掉注释掉的css
  170.             new OptimizeCssAssetsPlugin({
  171.                 assetNameRegExp: /\.css$/g,
  172.                 cssProcessorOptions: {
  173.                   safe: true,
  174.                   autoprefixer: { disable: true },
  175.                   mergeLonghand: false,
  176.                   discardComments: {
  177.                     removeAll: true // 移除注释
  178.                   }
  179.                 },
  180.                 canPrint: true
  181.             })
  182.         ],
  183.         splitChunks: {
  184.             cacheGroups: {
  185.                 vendor: {   // 抽离第三方插件
  186.                     test: /node_modules/,   // 指定是node_modules下的第三方包
  187.                     chunks: 'initial',
  188.                     name: 'vendor',  // 打包后的文件名，任意命名    
  189.                     // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
  190.                     priority: 10    
  191.                 },
  192.                 // utils: { // 抽离自己写的公共代码，utils这个名字可以随意起 (css/js公用的都会单独抽离出来生成一个单独的文件)
  193.                 //     chunks: 'initial',
  194.                 //     name: 'utils',  // 任意命名
  195.                 //     minSize: 0    // 只要超出0字节就生成一个新包
  196.                 // }
  197.             }
  198.         }
  199.     },        
  200.     devServer: {
  201.         historyApiFallback: true,
  202.         inline: true
  203.     },   
  204.     // externals: {
  205.     //     jquery: "jQuery",
  206.     // },
  207.     resolve: {
  208.         // alias 别名配置，它能够将导入语句里的关键字替换成你需要的路径
  209.         alias: {
  210.             // 比如我们就可以直接写 import Nav from '@/Nav'
  211.             '@': './app/component'
  212.         },
  213.         // 省略后缀
  214.         extensions: ['.js', '.jsx', '.less', '.json', '.css'],
  215.     },     
  216.     performance: {
  217.         hints: false // 选项可以控制 webpack 如何通知「资源(asset)和入口起点超过指定文件限制」
  218.     }
  219. }