在实际应用中，可能不再是spa,需要生成多个html；css文件太多打包到js中导致js比较大；需要引入第三方插件或者自己写的函数；配合react框架或者vue框架的时候，需要做些相关配置，以解决上述问题

一、多入口配置

默认情况下，打包后是只生成一个html文件的；在一些情况下，我们是需要打包后产生多个html文件。那我们就需要指定多个入口文件，并修改output的filenme设置

1.1首先我们需要指定多个入口，让webpck执行打包时从entry设置的几个js中开始解析

entry: {
    index: path.join(srcPath,'index.js'),
    other: path.join(srcPath,'other.js')
}
复制代码

1.2修改输出文件名设置，因为对于不同js打包后的结果，为了输出文件不重名；我们需要将filename用变量表示

output: {
    filename: '[name].[contentHash:8].js',//name的值对应于entry对象的属性名
    path: disPath,
}
复制代码

1.3在plugins数组中存放多个HtmlWebpackPlugin实例，HtmlWebpackPlugin的作用就是用来生成html文件并引入对应js的

plugins: [
    new HtmlWebpckPlugin({
        template: path.join(srcPth,'index.html'),
        filename: 'index.html',
        chunks: ['index']//chunks指定生成的html文件引入什么什么名称的js,如果不配置chunks，会把生成的js都引入进来,这里要考虑到代码分割后，需要引入被分割的js
    }),
    new HtmlWebpackPlgin({
        template: path.join(srcPth,'other.html'),
        filename: 'other.html',
        chuncks: ['other']//
    })
]
复制代码

二、抽离css文件

在不配置抽离css文件的情况下，打包后css样式会在打包后的js中，这样的话，只有当程序运行了js，js执行了将样式插入到body里的style标签中，样式才会起作用；而且当css不变的情况下，改变js,css同样要跟着被打包到js中，打包时比较耗费性能。 为了使css可以不依赖js执行，提升打包性能，选择抽离css文件比较好，抽离后的css文件在html中是以link标签引入进来的

2.1在plugins中配置MiniCssExtractPlugin

plugins: [
    //抽离css文件,指定抽离出的css文件的存放目录
    new MiniCssExtractPlugin({
        filename: 'css/main.[contentHash:8].css'
    })
]
复制代码

2.2 使用loader解析css/less文件，不再直接使用style-loader将css内容插入到style标签中了，而是使用MiniCssExtractPlugin抽离文件

rules: [
    //抽离css
    {
        test: /\.css$/,
        loader: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader'
        ]
    },
    //抽离less 先将less转css
    {
        test: /\.less$/,
        loader: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader',
            'postcss-loader'
        ]
    }
]
复制代码

2.3对抽离出的css文件进行压缩

optimization: {
    //压缩css
    minimizer: [
        new TerserJSPlugin({}),
        new OptimizeCssAssetsPlugin({})
    ]
}
复制代码

三、抽离公共代码

在实际开发当中，经常会有多个模块都引入了同一段公共代码，在打包时，如果每个模块都包含公共代码，是比较浪费空间的。我们需要将公共部分抽离出来，各个模块之间去进行相互引用，能减少加载和执行的次数。而且如果公共模块是第三方提供的模块，体积 比较大，我们是需要将它单独打包的，不然我们只是改变了业务代码，第三方模块也要跟着被重新打包进js中，是比较耗费性能的。下面分别对第三方模块和公共模块进行处理

3.1在optimization中使用splitChunks

    optimization: {
        splitChunks: {
            chunks: 'all',
            /**
              initial 入口chunk,对于异步导入的文件不处理，
              async 只对异步导入的文件处理
              all 全部chunk
            */
            //缓存分组
            cacheGroups: {
                //处理第三方模块
                vendor: {
                    name: 'vendor',//chunk名称
                    priority: 1, //优先级
                    test: /node_modules/,
                    minSize: xx,//大小限制，如果小于限制就不会被抽离
                    minChunks: 1 //最少复用过几次，只要被引用过一次，就要被抽离
                },
                //处理公共模块
                common: {
                    name: 'common',//chunk名称
                    priority: 0,//优先级
                    minSize: xx,公共模块的大小限制
                    minChunks: 2//公共模块最少复用过几次
                } 
            }
        }
    }
复制代码

四、处理jsx

npm install --save-dev @babel/preset-react
复制代码

安装后，在.babelrc文件中设置

{
    "presets": ["@babel/preset-react"]
}
复制代码

五、处理vue文件

使用vue-loader即可

rules: [
    {
        test: /\.vue$/,
        loader: ['vue-loader'],
        include: srcPath
    }
]
复制代码