【webpack】webpack4入门--插件使用

插件能拓展webpack的功能，让webpack更加灵活，我们使用插件来应用到webpack中。
首先安装mini-css-extract-plugin插件，这个插件是在webpack4中用于分离css文件的，webpack4之前用的是extract-text-webpack-plugin插件。
npm install mini-css-extract-plugin
安装完插件后，配置webpack.dev.js文件

const path = require('path')
const ExtractCssPlugin = require('mini-css-extract-plugin');

module.exports = {
  
  entry: {
    app: path.resolve(__dirname, '../main.js')
  },

  mode: "development",

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name]-bundle.js'
  },

  plugins: [
    new ExtractCssPlugin({
      filename: "[name].css",
    })
  ],

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

这是最简单的配置，配置完后我们用命令行打包，在打包目录下多出了一个css文件，这就是mini-css-extract-plugin插件帮我们做的事情，webpack中还有其他功能的插件，我们可以自行探索。