webpack代码压缩和css前缀补全

webpack配置代码压缩和css样式前缀自动补全

• 打包输出html html-webpack-plugin
• 打包css文件 mini-css-extract-plugin
• 压缩css optimize-css-assets-webpack-plugin
• js压缩 uglifyjs-webpack-plugin
• css样式自动补全前缀 postcss-loader autoprefixer postcss

首先通过 npm install 或者 yarn add 安装上述对应依赖插件，其次更改webpack.config.js配置文件即可；

webpack.config.js配置代码

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');//打包输出html
let MiniCssExtractPlugin = require('mini-css-extract-plugin');// 打包css文件
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//压缩css
let UglifyjsPlugin = require('uglifyjs-webpack-plugin');//处理js压缩问题
module.exports = {
    devServer: {
        port: 8080,
        progress: true,
        contentBase: './build',
        open: true
    },
    optimization: {//优化项
        minimizer: [
            new UglifyjsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
            }),
            new OptimizeCssAssetsWebpackPlugin()//添加这个配置后执行npm run build后发现js不编译需要进行另外处理
        ]
    },
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板的位置
            filename: 'index.html', // 编译后的文件名
            minify: {
                removeComments: true, // 移除HTML中的注释
                removeAttributeQuotes: true, //移除属性中的引号
                minifyCSS: true, //压缩内联css
                collapseWhitespace: true //删除空白符与换行符
            }
        }),
        new MiniCssExtractPlugin({ //将css单独打包成一个文件
            filename: 'main.css'
        })
    ],
    module: {
        rules: [
            {test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',// 自动补全前缀
            ]},
            {test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
            ]}
        ]
    }
}

css自动补全前缀需要在webpack配置根目录新建一个 postcss.config.js 文件进行配置才能生效，否则会提示没有该配置文件，让去创建

postcss.config.js简单配置如下

module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: ['last 100 versions']
        })
    ]
}

执行 npm run build 即可运行测试