webpackstudy/34/webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

/**
 * 
 */
module.exports = {
    entry: './src/index.js',
    output: {
        filename:'[name].js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ],
    mode: 'production',
    /**
     * 解析模块规则
     */
    resolve:{
        //配置解析路径别名 缺点：编辑器无提示
        alias:{
            $css: resolve(__dirname,'src/css')
        },
        //配置省略文件路径的后缀名
        extensions:[
            '.js','.json','.css'
        ],
        //告诉webpack解析模块位置
        modules:[
            resolve(__dirname,'../node_modules'),'node_modules'
        ]
    },
    optimization:{
        splitChunks:{
            chunks:'all',
            minSize: 30 * 1024, //分割的chunk最小位30kb
            maxSize: 0,//最大沒有限制
            minChunks: 1, //要提取的chunk最少被引用一次
            maxAsyncRequests: 5, // 按需加載時并行加載文件的最大數量
            maxInitialRequests: 3, // 入口js文件最大并行請求數量
            autumaticNameDelimiter: '~', // 名稱連接符
            name: true, // 可以使用命名規則
            cacheGroups:{  //分割chunk的組
                vendors:{
                    test:/[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default:{
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk:true
                }
            }
        }
    }
}