前面講過 將css文件引入到js文件中，然後一起打包成js文件，現在我們學習單獨提取分離css並且打包。

• 安裝插件min-css-extract-plugin

  npm install mini-css-extract-plugin --save-dev

• 配置webpack.config.js

  • 引入插件

    const MiniCssPlugin = require("mini-css-extract-plugin");

  • rules 設置

        {
          test:/\.css$/,
          use:[MiniCssPlugin.loader,'css-loader']
        }
     
    

    ?

  • plugins 設置

      new MiniCssPlugin({
        filename:'./css/[name].css'
      })
    

    截圖

    

• 運行命令打包

Webpack 4 學習07（提取分離打包css）