上个博客记录了webpack 的基本配置今天主要是css-loader的介绍，包括单独提出css，压缩css、js文件
这里使用的插件npm 地址：https://www.npmjs.com/package/mini-css-extract-plugin
首先将css分离一个css文件中安装 npm install --save-dev mini-css-extract-plugin，
具体的配置如下：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
"css-loader"
]
}
]
}
}
这里打包压缩必须在生产环境中而不是开发环境不然css、js压缩不了