《webpack学习》- 入门使用Plugin

Plugin 是用来扩展Webpack功能的，通过在构建流程里注入钩子实现，它为Webpack带来了很大的灵活性。

在上面一节中，我们将css打包到bundle.js中，很明显，把css打包进.js中会让bundle.js变得越来越大，需要将其进行切割，打包到单独的文件中。

下面看一个例子：

参考地址：​​​​https://www.npmjs.com/package/mini-css-extract-plugin​​​​

首先安装插件：​​npm install --save-dev mini-css-extract-plugin​​

webpack.config.js

const path =  require('path');

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

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
    },
    plugins: [new MiniCssExtractPlugin()],
    module: { 
        rules: [
            {
              test: /\.css$/i,
              use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
          ],
     },   
};

生成结果

安装成功后，dist目录下多出一个main.css文件，bundle.js文件也没有css代码了，再将css文件引入index.html里就可以了。

总结

从上面可以看出plugin的使用步骤：

• • 
    
• 引入（或者自己写一个）到自己的项目里
• webpack.config.js文件引入，并且在plugins属性中进行实例化
• 在module的rules中使用