插件能拓展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中还有其他功能的插件,我们可以自行探索。