前面講過 將css文件引入到j(luò)s文件中，然后一起打包成js文件，現(xiàn)在我們學(xué)習(xí)單獨提取分離css并且打包。

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

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

• 配置webpack.config.js

  • 引入插件

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

  • rules 設(shè)置

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

    ?

  • plugins 設(shè)置

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

    截圖

    image

• 運(yùn)行命令打包