小生愛

    

      
                // webpack.dll.config.js
                // 先通过DllPlugin 打包第三方文件
                const path = require('path')
                const webpack = require('webpack')
                const vendors = [
                  'jquery',
                  'react',
                  'vue'
                ]

                module.exports = {
                  context: path.resolve('./'),

                  entry: {
                    vendor: vendors
                  },

                  devtool: 'cheap-module-source-map',

                  output: {
                    path: path.join(__dirname, 'build'),
                    filename: '[name].[chunkhash].js',
                    library: '[name]_[chunkhash]'
                  },
                  
                  plugins: [
                    /**
                      * DllPlugin : 打包公共文件 一般是第三方库
                      * 优点 : 
                          1. Dll 打包以后是独立存在的 只要第三方库没有变化 就不用再重新打包Dll 
                          2. App 部分代码打包 只需要编译app部分 Dll的内容 只要没有变化就不需要重新打包 这样每次
                             只需要打包第三方库 大大提高了编译的速度
                          3. 如果有多个项目 使用了相同的依赖库 它们可以共用一个 Dll (重新打包一次 也不费多少时间)
                    */
                    new webpack.DllPlugin({
                      // Dll 文件的输出路径 .json名字可以随便取
                      path: './dll/manifest.json',
                      // Dll 文件名 可以随便取
                      name: '[name]_[chunkhash]',
                    })
                  ],

                  watch: true
                }

  

  

                // DllReferencePlugin: 引用 DllPlugin 打包好的dll 文件打包其他文件
                // 引入 DllPlugin 打包的 dll 主要是为了用 DllPlugin打包好的第三方文件
                const path = require('path')
                const webpack = require('webpack');

                module.exports = {
                  context: path.resolve('./'),

                  entry: {
                    app: './app/index.js',
                  },

                  output: {
                    path: path.join(__dirname, 'build'),
                    filename: '[name].[chunkhash].js',
                  },
                  
                  plugins: [
                    // DllReferencePlugin 配合 DllPlugin 打包好的 Dll使用
                    // 这里只需要引用 DllPlugin 生成好的 .json文件就可以了
                    new webpack.DllReferencePlugin({
                      // 这里用其他名字报错 manifest可以 不知道为什么 暂时就用 manifest
                      manifest: require('./dll/manifest.json'),
                    }),
                  ],

                 watch: true
                }
                
                下载例子