Webpack——optimization详细配置

optimization详细配置

webpack.config.js

/**
 * externals：如果某些包是通过CDN方式引入，不想打包到我们的代码中，可以使用externals
 */
const { resolve } = require('path');
// 引入workbox
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 将css单独提出文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入压缩插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 将通用的loader抽离出来
// 设置nodejs的环境变量
// process.env.NODE_ENV = 'development';
const commonLoaders = [
    MiniCssExtractPlugin.loader, // 使用该loader将js中的css导入到文件中，并引入html文件
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                ident: 'postcss',
                plugins: [['postcss-preset-env', {}]]
            }
        },
    },
]
module.exports = {
    mode: 'development',
    // 单入口
    // entry: './src/js/index.js',
    // 多入口：有几个入口就输出几个bundle
    // entry: {
    //     index: './src/js/index.js',
    //     test: './src/js/test.js',
    // },
    entry: ['babel-polyfill', './src/js/index.js', './src/index.html'],
    output: {
        filename: 'js/[name]-[contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // 以下loader只会匹配一下，提升构建速度
                // 注意：不能有两个loader处理同一个文件
                oneOf: [
                    // 对js进行兼容性处理
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        use: [
                            'thread-loader',
                            {
                                loader: 'babel-loader',
                                options: {
                                    presets: ["@babel/preset-env"],
                                    plugins: [["@babel/plugin-transform-runtime"]],
                                    //开启缓存，第二次构建时，只处理发生变化的js文件
                                    cacheDirectory:true
                                },
                            },
                        ]
                    },
                    // css文件处理
                    {
                        test: /\.css$/,
                        use: [
                            ...commonLoaders
                        ],
                    },
                    // less文件处理
                    {
                        test: /\.less$/,
                        use: [
                            ...commonLoaders,
                            'less-loader'
                        ],
                    },
                    // image图片处理
                    {
                        test: /\.(jpg|png|gif)$/,
                        type:"asset",
                        //解析
                        parser: {
                            //转base64的条件
                            dataUrlCondition: {
                                maxSize: 8 * 1024, // 8kb
                            }
                        },
                        generator:{ 
                            //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                            filename:'img/[name][contenthash:10].[ext]',
                            //打包后对资源的引入，文件命名已经有/img了
                            publicPath:'./'
                        },
                    },
                    // 处理html中的image资源
                    {
                        test: /\.html$/,
                        loader: 'html-loader',
                        generator:{ 
                            //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                            filename:'img/[name][contenthash:10].[ext]',
                            //打包后对资源的引入，文件命名已经有/img了
                            publicPath:'./'
                        },
                    },
                    // 字体图标等其他资源处理
                    {
                        exclude: /\.(html|css|js|jpg|png|gif)$/,
                        type: 'asset/resource',
                        generator:{ 
                            //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                            filename:'otherSource/[name][contenthash:10].[ext]',
                            //打包后对资源的引入，文件命名已经有/img了
                            publicPath:'./'
                        },
                    },
                ]
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        // 使用miniCssExtractPlugin插件将css提取为一个文件
        new MiniCssExtractPlugin({
            // 对输出的文件重命名
            filename: 'css/built[contenthash:10].css',
        }),
        // 调用压缩css插件
        new OptimizeCssAssetsWebpackPlugin(),
        // 调用PWA插件
        new WorkboxWebpackPlugin.GenerateSW({
            /**
             * 1.帮助serviceworker快速启动
             * 2.删除旧的serviceworker
             *  生成一个serviceworker的配置文件
             */
            clientsClaim: true,
            skipWaiting: true,
        }),
    ],
    devServer: {
        // 开发服务器项目路径
        static: resolve(__dirname, 'build'),
        // 是否开启gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 是否自动打开浏览器
        open: true,
        // 打开HMR功能
        hot: true,
    },
    // 开启追踪源代码报错功能
    // devtool: 'eval-source-map',
    // 使用代码分割功能
    /**
     * 可以将node_modules中的代码单独打包成一个trunk最终输出
     * 自动分析多入口文件中，是否有公共的依赖，如果有会打包成一个单独的trunk
     */
    optimization: {
        splitChunks: {
            chunks: 'all',
            // minSize: 30 * 1024, // 分割的trunk最小为30KB
            // maxSize: 1024 * 1024 * 1024, // 最大1G限制
            // minChunks: 1, // 要提取的trunk最少被引用1次
            // maxAsyncRequests: 5, // 按需加载时并行加载的文件最大数量
            // automaticNameDelimiter: '~', // 名称连接符
            // name: 'vendors', // 可以使用命名规则
            // cacheGroups: { // 分割的trunk组
            //     // node_modules文件会被打包到vendors组的trunks中。vendors~xxx.js
            //     vendors: {
            //         test: /[\\/]node_modules[\\/]/,
            //         priority: -10,
            //     }
            // },
            // webpack5好像没有该配置了
            // default: {
            //     minChunks: 1, // 要提取的trunk最少被引用1次
            //     priority: -10, // 优先级
            //     reuseExistingChunk: true, // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
            // },
        },
        // 将当前模块记录其他模块的hash值单独打包到一个文件
        runtimeChunk: {
            name: entrypoint => `runtime-${entrypoint.name}`
        }
    },
    externals: {
        // 拒绝Jquery被打包进来
        jquery: 'jQuery',
    }
}