拆分打包的文件

页面引入了第三方库（eg:jquery文件）， 没有配置SplitChunksPlugin(在插件中，直接使用不需安装)时，打包时会把入口文件和jquery文件打包在一个文件里

• 在出口文件中 要配置 chunkFilename

1 单个入口文件

 entry: "./src/main.js",
  output: {
        filename: "js/[name].js",
        chunkFilename:"js/chunk-[id].js",//此选项决定了非入口(non-entry) chunk 文件的名称
    },
 optimization: {
        splitChunks: { //主要就是根据不同的策略来分割打包出来的bundle
          cacheGroups:{
              vendor:{
                  priority:1,//优先级
                  test: /[\\/]node_modules[\\/]/,//识别node_modulse文件
                  chunks:"initial",//从入口文件开始识别（寻找引入的文件有哪些） 其他取值- all、sync
                  minSize:0,//定义能够打包的文件(第三方库)大小的最小值 kb，eg:1024
                  minChunks:1,//文件被引入几次，才会被打包拆分 一般设置 2 
              }
          }
        }
      }

2 多个入口文件 （完整写法）

• 添加 chunks

 const htmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
    //多个入口文件
    entry: {
        page1: "./src/entry/page1.js",
        page2: "./src/entry/page2.js",
        page3: "./src/entry/page3.js"
    },
    output: {
        filename: "js/[name].js",
        chunkFilename: "js/verdor/chunk-[name].js",//此选项决定了非入口(non-entry) chunk 文件的名称
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: "page1.html", //多个模板时加上filename
            template: "./public/page1.html",
            chunks: ["page1"],//添加chunks 会引入对应的入口文件的内容
        }),
        new htmlWebpackPlugin({
            filename: "page2.html", //多个模板时加上filename
            template: "./public/page2.html",
            chunks: ["page2"],//添加chunks 会引入对应的入口文件的内容
        }),
        new htmlWebpackPlugin({
            filename: "page3.html", //多个模板时加上filename
            template: "./public/page3.html",
           chunks: ["page3"],//添加chunks 会引入对应的入口文件的内容
        }),
        new CleanWebpackPlugin()
    ],
    //页面引入了第三方库（eg:jquery文件）， 没有配置SplitChunksPlugin(在插件中，直接使用不需安装)时，打包时会把入口文件和jquery文件打包在一个文件里
    //然后在出口文件中 也要配置 chunkFilename 
    optimization: {
        splitChunks: { //主要就是根据不同的策略来分割打包出来的bundle
            chunks: "initial",
            minSize: 0,
            cacheGroups: {
                vendor: { //配置的第三方库
                    priority: 1,//优先级
                    test: /[\\/]node_modules[\\/]/,//识别node_modulse文件
                    //   chunks:"initial",//从入口文件开始识别（寻找引入的文件有哪些） 其他取值- all、sync
                    //   minSize:0,//定义能够打包的文件(第三方库)大小的最小值 kb，eg:1024
                    //   minChunks:1,//文件被引入几次，才会被打包拆分 一般设置 2 
                    name: "vendor",//任意起
                    minChunks:1
                },
                common: { //公共的部分 名字任意
                    priority: -10,//比node_modules的优先级低 (比1小就行),
                    minChunks: 2,
                    name: "common"
                }
            }
        }
    }
}
//vue 的配置
optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minSize: 0,
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    }
  }