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一起使用
}