上篇文章webpack能處理css文件，但是css還不能提取到單獨文件中，本文針對樣式添加如下操作：

• 1、安裝插件提取到單獨文件

   yarn add mini-css-extract-plugin -D
    
    // 添加相關配置：
   plugins: [
    // 抽離css為單獨文件
      new MiniCssExtractPlugin({
        filename: 'main.css'
      })
    ],
    module: {
      rules: [
        {
          test: /\.css$/, //匹配css文件
          use: [ MiniCssExtractPlugin.loader, 'css-loader']
       },
       {
          test: /\.less$/, //匹配less文件
          use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
       }
      ]
   }
  

• 2、安裝自動生成css前綴插件

      yarn add postcss-loader autoprefixer -D
      
      1、相關配置：
       module: {
          rules: [
             {
               test: /\.css$/, //匹配css文件
               use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ]
             },{
                test: /\.less$/, //匹配less文件
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' , 'less-loader']
  
               }
           ]
        }
  
      2、新建postcss.config.js：
      module.exports= {
       plugins: [ require('autoprefixer') ]
      }
  
      3、package.json添加，如果不添加不會生成樣式前綴：
  
      "browserslist": [
          "last 100 versions"
       ]
    
  

• 3、安裝樣式壓縮插件

      yarn add optimize-css-assets-webpack-plugin -D
      
      配置：
        
      // 壓縮 model 必須是production才有效果
       module.exports = {
        optimization: {
          minimizer: [
              new OptimizeCssPlugin()
          ]      
        },
        mode: 'production',                   
           plugins: [
            // 不使用optimization配置話，可以在插件里配置壓縮
             //new OptimizeCssPlugin()
           ]
       }
  
  

webpack.config.js 完整配置

//  webpack是node寫出來的， 需要node的寫法
let path = require('path');
// path.resolve 相對路徑轉成絕對路徑
// console.log(path.resolve('dist'));
// 以當前目錄
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');

// 抽離css為單獨文件
let MiniCssExtractPlugin =  require('mini-css-extract-plugin');
// 導入樣式壓縮
let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');

// webpack相關配置
module.exports = {
    // 壓縮 model 必須是production才有效果
    optimization: {
        minimizer: [
            new OptimizeCssPlugin()
        ]      
    },
    // 開發服務的配置
    devServer: {
        // 端口，默認8080
        port: '8099',
        // 進度條
        progress: true,
        // 啟動后訪問目錄，默認是項目根目錄，這個設置到打包后目錄
        contentBase: './build',
        // 啟動壓縮
        //compress: true
    },
    // 模式，2種：生產模式(production)和開發模式(development)
    // 開發模式不壓縮打包后代碼，生產模式壓縮打包后代碼
    mode: 'development',
    // 入口,表示從哪里開始打包
    entry: './src/index.js',   
    // 表示出口(輸出后文件相關配置)
    output: {   
        // 打包后的文件名,產生哈希
        //filename: 'bundle.[hash].js',  
        // 哈希8位
        filename: 'bundle.[hash:8].js',  
        // 輸出后的路徑(必須是一個絕對路徑)
        path: path.resolve(__dirname, 'dist')
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html',
            // 生產開啟，壓縮代碼
            // minify: {
            //     // 刪除html雙引號
            //     removeAttributeQuotes: true,
            //     // 壓縮成一行
            //     collapseWhitespace: true
            // },
            // 文件哈希
            //hash: true
        }),
        // 抽離css為單獨文件
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
        // 壓縮css
        //new OptimizeCssPlugin()
    ],
    // 模塊處理
    module: {
        // loader
        rules: [
            {
                test: /\.css$/, //匹配css文件
                // css-loader 處理css文件@import嵌套
                // style-loader 把css插入header
                // 多個loader需要數組，單個可寫成字符串
                // loader順序：從右向左執行,從下到上，單個loader可添加更多配置，使用對象形式
                // use: [{loader: 'style-loader', options: ...}, 'css-loader']
                // use: [{
                //    loader: 'style-loader',
                //    options: {
                //        // 樣式插入到頂部
                //        insertAt: 'top'
                //    }
                // }, 'css-loader']
                // css-load處理完 再 抽離，從后往前執行loader
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ]
            },
            {
                test: /\.less$/, //匹配less文件
                // css-loader 處理css文件@import嵌套
                // style-loader 把css插入header
                // 多個loader需要數組，單個可寫成字符串
                // loader順序：從右向左執行,從下到上，單個loader可添加更多配置，使用對象形式
                // use: [{loader: 'style-loader', options: ...}, 'css-loader']
                // use: [{
                //    loader: 'style-loader',
                //    options: {
                //        // 樣式插入到頂部
                //        insertAt: 'top'
                //    }
                // }, 'css-loader', 'less-loader']
                // 從后向前執行
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' , 'less-loader']
            }
        ]
    }
}

如果使用了樣式壓縮，js不會被壓縮，解決方法：

• 1、安裝插件

yarn add uglifyjs-webpack-plugin -D

-2 、添加配置：

module.exports = {
  // 壓縮 model 必須是production才有效果
  optimization: {
    minimizer: [
      new UglifyjsPlugin({
        // 使用緩存
        cache: true
      }),
      new OptimizeCssPlugin()
    ]      
   },
   plugins: [
    // 壓縮js
    // new UglifyjsPlugin({
    //     // 使用緩存
    //     cache: true
    // })
  ]
}