webpack4.0 css压缩js压缩 css 样式添加前缀

webpack.config.js配置文件

/*webpack 是node写出来的node的写法*/
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");//
let MiniCssExtractPlugin = require("mini-css-extract-plugin");//抽离生成css打包文件（可以引用多次）
let OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
let UglifyJsPlugin = require("uglifyjs-webpack-plugin");//优化js如压缩
console.log(path.resolve('dist'));//输出绝对路劲
module.exports = {
    optimization: {//优化项
        minimizer: [
            new UglifyJsPlugin({
                cache: true,//缓冲
                parallel: true, //并发打包,一次打包多个
                sourceMap:true,//源码调试
            }),
            new OptimizeCSSAssetsPlugin()//优化css为压缩格式
        ]
    },
    devServer: {
        port: "3000",
        progress: true,//如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
        contentBase: path.join(__dirname, "public"),//此处最好是绝对路径
    },
    mode: "production",//模式 默认两种模式 production development
    entry: "./src/index.js",//入口
    output: {
        filename: 'bundle.[hash:8].js',//打包后的文件名,[hash:8]生成8位的哈希戳
        path: path.resolve(__dirname, "dist"),//以当前目录下产生一个dist文件,必须是绝对路径
    },
    plugins: [//数组放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: "./src/index.html",//引入的路径
            filename: "index.html",//打包后的名字
            hash: true,//引用js加哈希戳
        }),
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ],
    module: {//模块
        rules: [//规则 css-loader 接续@import这种语法
            //style-loader 他是把css插入到header的标签中
            //loader默认是从右向左执行['style-loader', 'css-loader']其中一种引入方法
            //loader还可以写成对象方式
            {
                //可以处理less文件
                test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']//将生成的css打包到main.css中
            },
            {
                //可以处理less文件
                // node-sass sass-loader
                //stylus stylus-loader
                test: /\.less$/, use: [
                    MiniCssExtractPlugin.loader,//将生成的css打包到main.css中
                    'css-loader',
                    'postcss-loader',//在css前面加前缀(先处理postcss-loader在处理css-loader)
                    'less-loader'//把less ->css
                ]
            },
        ]
    }
}

postcss.config.js配置文件

module.exports = {
    plugins: [require('autoprefixer')],//css加前缀需要写的配置文件配合postcss-loader一起使用
}