1 loader

使用include，缩小编译范围：

rules: [{   test: /\.js$/,   include: path.resolve(__dirname, '../src'),  use: [{    loader: 'babel-loader'    }]  }]

 2 使用resolve 设置省略的后缀名和默认的文件名

module.exports = {  resolve: {    extensions: ['.js','jsx'], //设置省略的后缀    mainFiles:['index','child'] //设置默认打开的文件名  }}

3 目标：第三方模块只打包一次。

1） 第三方模块只打包一次；

2）我们引入第三方模块的时候，要去使用dll文件引入

对于第三方模块，不会经常变化的库，比如 react、 react-dom、 doash等库，打包的时候使用 webpack.dll.js文件：

const path = require('path');module.exports = {  mode: 'production',  entry: {    vendors: ['lodash','react', 'react-dom'] //这里规定单独打包的文件  },  output: {    filename: '[name].dll.js',    path: path.resolve(__dirname, '../dll'),    library: '[name]' //打包生成一个(library)库,库的名字是 vendors，在全局变量中使用 vendors 调用这些库  }}

命令行：

{  "scripts":{    "build:dll":"webpack --config ./build/webpack.dll.js"  }}

这样就会把这几个库中的js打包到 dll文件夹下的 vendors.dll.js

3.2 打包成功之后，如何在业务代码中使用呢？

安装：   import install add-asset-html-webpack-plugin --save 

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');module.exports = {  plugins:[    new AddAssetHtmlWebpackPlugin({ //向生成的html中添加下面的代码      filepath: path.resolve(__dirname,'../dll/vendors.dll.js')     })  ]}

 

 

const path = require('path');const webpack = require('webpack');module.exports = {  mode: 'production',  entry: {    vendors: ['lodash'],    react: ['react', 'react-dom'],    jquery: ['jquery']  },  output: {    filename: '[name].dll.js',    path: path.resolve(__dirname, '../dll'),    library: '[name]'  },  plugins: [    new webpack.DllPlugin({      name: '[name]', //对生成的library库分析，并把映射关系放再 下面的path中      path: path.resolve(__dirname, '../dll/[name].manifest.json'),    })  ]}

 

然后在webpack.comm.js中

{  plugins:[    webpack.DllReferencePlugin({      manifest:path.resolve(__dirname,'../dll/vendors.manifest.json')    })  ]}