webpack4特征

webpack4比较热点的两大特征，零设置和速率快（号称提速上限98%）

平常情况下，webpack4比拟于低版本，production场景下第三方依靠打包速率 和 development场景下当地效劳初次启动速率 都获得明显提拔

零设置
经由历程mode指定当前场景为开辟形式照样临盆形式，自动设置好当前场景的默许设置，用户即可立时运用，不须要过剩的设置

打包速率快
打包速率之所以能获得明显提拔，多亏了Optimization这个新增的选项，下文会说到

设置选项申明

1.进口（entry）

是运用程序，或许说一个页面的出发点进口，假如通报一个数组，那末数组的每一项都邑实行
每一个html页面都有一个进口出发点
单页面运用（SPA）：一个进口
多页面运用（MPA ：多个进口

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

假如entry的值是一个字符串，那末打包以后的chunk名即为默许的main
假如entry的值是一个对象，则每一个key都邑是chunk的名字，每一个key对应的值都是进口出发点

2.输出（output）

output的值必需为一个对象，最少包含下面两个属性

filename: webpack打包以后输出文件的途径
path: 决议了每一个输出的bundle的称号(即打包后的文件名字)，这些bundle将写入到output.path指定的目次下

比方：
单进口

output: {
    path: '/dist',
    filename: 'bundle.js'
}

这个设置将会在根目次的dist文件夹下输出打包后的bundle.js，这是单页面运用的设置

多进口

output: {
    path: '/dist',
    filename: 'js/[name].js'
}

即在dist目次下的js文件夹中输出一系列的bundle

一个比较难明白的设置：ouput.publicPath

设置html中援用的静态资本的目次，在多半情况下，此选项的值为’/’

publicPath并不会对webpack打包文件后寄存的目次有所影响，是对天生的html中运用的静态资本，比方图片，css和js文件的援用途径做对应的补足

关于按需加载或许加载外部资本来讲，这个选项的值尤为重要，假如设置毛病，加载资本的时刻会返回404

3.模块加载器（loader）

loaders能够说是种种模块的转换器，能够用来预处置惩罚文件，剖析和打包除javascript以外的任何静态资本

loader要下载才设置运用，比方:
npm install –save-dev css-loader
npm install –save-dev ts-loader

然后在webpack的设置文件中，声明，css后缀的文件运用css-loader剖析，ts后缀的文件运用ts-loader剖析

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

更多loader的设置：webpack loaders

4.插件（plugins）

plugins用于自定义webpack的构建历程, 比方自定义打包以后的html模板，自定义js和款式文件是不是打包等等
plugins的值，是一个个new出来的插件实例

webpack4取消了四个常常使用的用于机能优化的pluginUglifyjsWebpackPlugin，CommonsChunkPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin
转而供应了一个名为optimization的设置项，用于替换以上四个插件（并非说以上插件不能运用了，只是webpack4自身有替换的计划，能够不必插件）

html-webpack-plugin
经由历程new 该插件的实例，能够让webpack帮我们编译出一个html文件
须要注意的是，多页面的设置下，有多少个页面，就要new多少个实例，传入到plugins中，背面有代码示例。

html-webpack-inline-source-plugin
这个插件用于临盆形式下，让webpack在打包的时刻，将js和css直接插入到html中，从而削减要求的斲丧
要注意的是，并非一切情况下都适合用，文件较大时，照样引荐经由历程标签去引入资本（运转时文件平常比较小，下面会经由历程另一个插件将runtime的代码直接插入html中）

更多插件及其设置：webpack plugins

5.形式（mode）

mode是webpack4新增的参数选项，它有三个值，development、production、none,
由于开辟形式和临盆形式所须要的webpack的设置轻微有单差别（然则大部分是雷同的）
所以能够竖立两个webpack的设置文件，离别用于开辟形式和临盆形式，除此以外，指明当前处于哪一个形式下，有利于webpack内部做优化
比方，有一些插件是在临盆形式下才启用的。

经由历程指定mode的值为development和production中的一个，来示意webpack处于何种形式下，默许值是production

mode为 development 时，注意提拔代码的构建速率和开辟体验

module.exports = {
  mode: 'development',
  cache: true,
  devtools: "eval",
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })
  ]
};

mode为 production 时，供应代码优化，如紧缩、作用域提拔等

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

也能够经由历程敕令行运转下面的敕令来指定形式
webpack –mode=production

6.优化（optimization）

这个选项也是wepack4新增的，重要用来自定义一些优化打包的战略

minimizer
在production形式下，该设置会默许为我们紧缩殽杂代码，但设置项过于少致使没法满足我们关于优化代码的诉求，下面是一套比较天真的优化设置

var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
  optimization: {
    minimizer: [
      // 自定义js优化设置，将会掩盖默许设置
      new UglifyJsPlugin({
        exclude: /\.min\.js$/, // 过滤掉以".min.js"末端的文件，我们以为这个后缀自身就是已紧缩好的代码，没必要举行二次紧缩
        cache: true,
        parallel: true, // 开启并行紧缩，充分利用cpu
        sourceMap: false,
        extractComments: false, // 移除解释
        uglifyOptions: {
          compress: {
            unused: true,
            warnings: false,
            drop_debugger: true
          },
          output: {
            comments: false
          }
        }
      }),
      // 用于优化css文件
      new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessorOptions: {
          safe: true,
          autoprefixer: { disable: true }, //这里注意下!!!!!
          mergeLonghand: false,
          discardComments: {
            removeAll: true // 移除解释
          }
        },
        canPrint: true
      })
    ]
  }
}

UglifyJsPlugin是人人常常运用的插件，这里比较亮的处所是能够过滤自身已紧缩的js，能够提拔打包速率，而且防止二次殽杂紧缩形成的未知bug

OptimizeCssAssetsPlugin用来优化css文件的输出，优化战略包含：抛弃反复的款式定义、砍掉款式划定规矩中过剩的参数、移除不须要的浏览器前缀等
这里注意插件的参数autoprefixer: { disable: true }，肯定要指定为true。不然的话该插件会把我们用autoprefix加好的前缀都移撤除（由于该插件以为过剩）

runtimeChunk
星散出webpack编译出来的运转时代码，也就是我们之前成为manifest的代码块，轻易我们做文件的之就好缓存
这个参数项（runtimeChunk）有多种范例的值，个中，single行将一切的chunk的运转时代码打包到一个文件中，multiple即针对每一个chunk的运转时代码离别打包出一个runtime文件
我们能够合营上面说到的 InlineManifestWebpackPlugin插件，将运转时代码直接插入html文件中，由于这段代码异常少，如许做能够防止一次要求的开支
InlineManifestWebpackPlugin插件的递次肯定要在HtmlWebpackPlugin以后，不然会致使编译失利

var HtmlWebpackPlugin = require('html-webpack-plugin')
var InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
module.exports = {
  optimization: {
    runtimeChunk: 'single'
    // 等价于
    // runtimeChunk: {
    //   name: 'runtime'
    // }
  },
  plugins: [
     new HtmlWebpackPlugin({
       template: '../src/index.html',
       filename: 'article.html',
       chunks: ['article', 'vendors', 'runtime']
     }),
     new InlineManifestWebpackPlugin(), //放在htmlWebpackPlugin的背面才见效
  ]
}

splitChunks
这是比较难明白的一个设置项
webpack4移除了CommonsChunkPlugin插件，取而代之的是splitChunks
比较文雅的星散打包设置以下

splitChunks: {
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendors',
      minSize: 30000,
      minChunks: 1,
      chunks: 'initial',
      priority: 1 // 该设置项是设置处置惩罚的优先级，数值越大越优先处置惩罚
    },
    commons: {
      test: /[\\/]src[\\/]common[\\/]/,
      name: 'commons',
      minSize: 30000,
      minChunks: 3,
      chunks: 'initial',
      priority: -1,
      reuseExistingChunk: true // 这个设置许可我们运用已存在的代码块
    }
  }
}

这段设置，首先是将node_modules中的模块一致打包成vendors.js
它限定了星散文件的最小体积为30k（紧缩之前的），由于webpack以为，小于30k的代码星散出来，还要分外小号一次要求去加载它，本钱太高，这个值是经由历程大批的时候总结出来的
其次，还星散除了同享模块，比方src目次下有几个全局公用的js文件如utils等，能够零丁抽出来打包成一个commons.js
由于这部分文件不常常转变，有利于耐久缓存

完：demo地点