webpackstudy/23/webpack.config.js

const { resolve } = require("path");

//html资源处理
const HtmlWebpackPlugin = require('html-webpack-plugin')
//设置node环境变量 postcss-loader会根据它读取package.js里的browserslist配置
process.env.NODE_ENV = 'development'

/**
 * 1、通过多入口 + optimization配置
 * 2、通过单入口 + optimization配置
 * 3、通过js代码，让某个文件被单独打包成一个chunk 示例在 ./src/js/index.js
 */
module.exports = {
    entry: {
        // 多入口
        index: './src/js/index.js',
        test: './src/js/test.js'
    },
    output: {
        // name取文件名
        filename: 'js/[name].[contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        })
    ],
    // 可以将node_modules 中代码单独打包一个chunk最终输出
    // 自动分析多入口chunk中，是否有公共文件，公共文件会单独打包。
    optimization:{
        splitChunks:{
            chunks:'all'
        }
    },
    mode:'production'
}