webpack入门三

1.生产环境 复制插件 copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
   plugins: [
       new CopyWebpackPlugin({
            patterns: [
                { 
                    from: path.resolve(__dirname, 'src/css'),
                    to: path.resolve(__dirname, 'style') },
            ],
        })
   ]
}

2.生产环境 清除插件 clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
   plugins: [
       new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['**/*'],
        })
   ]
}

3. 生产环境 样式优化插件 mini-css-extract-plugin 用于css less sass

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isPro = env === 'production'

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    isPro ? MiniCssExtractPlugin.loader : 'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        },
                    },
                    'postcss-loader',
                ],
            },
        ]
    }
    plugins: [
        isPro && new MiniCssExtractPlugin(), // 只有在生产环境才用
    ].filter(Boolean)
}

4.生产环境 css压缩插件 css-minimizer-webpack-plugin 需要自行安装
           js压缩 terser-webpack-plugin webpack5默认安装了不需要再安装

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimize: isPro,
        minimizer: [
            isPro && new CssMinimizerPlugin(),
            isPro && new TerserPlugin()   
        ].filter(Boolean),
    },
}

5. 配置source-map
生产环境配置 
module.exports = {
    devtool: false
}
开发环境
module.exports = {
    devtool: 'eval-cheap-module-source-map'
}
// 测试环境自己调试配置
plugins: [
    new webpack.SourceMapDevToolPlugin({
        filename: '[file].map',
        append: '\n//# sourcemappingURL=http://127.0.0.1:8080/[url]', // 这个map映射本地地址
    }),
    new FilemanagerWebpackPlugin({
        events: {
            onEnd: {
                copy: [{
                    source: './dist/*.map',
                    destination: path.join(__dirname, 'maps'),
                }],
                delete: ['./dist/*.map'],
            },
        },
    }),
],