webpack plugin 基本使用

 

## plugin的使用

 

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

 

上面把通过loader加载了css，下面使用plugin把css单独提取一个单独的文件

 

```javascript

const path = require("path");

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

 

module.exports = {

// JavaScript 执行入口文件

entry: './main.js',

output: {

// 把所有依赖的模块合并输出到一个 bundle.js 文件

filename: 'bundle.js',

        // 把输出文件都放到 dist 目录下

        path: path.resolve(__dirname, './dist'),

    },

    module: {

        rules: [

            {

                // 用正则去匹配要用该 loader 转换的 CSS 文件

                test: /\.css$/,

                use: [

                    MiniCssExtractPlugin.loader,

                    "css-loader"

                ]

            }

        ]

    },

    plugins: [

        new MiniCssExtractPlugin({

            // Options similar to the same options in webpackOptions.output

            // both options are optional

            filename: "[name].css",

            chunkFilename: "[id].css"

        })

    ],

}

```