webpack配置之js和css文件
webpack默认会将
js 和
css打包生成一个
.js文件，我们可以使用
mini-css-extract-plugin插件将css样式单独分离成一个文件，以外链式的形式引入。但该插件只能分离css，不能分离其他
.less、
.sess等文件，因此我们可以在
.css文件中引用其他
.less、
.sess文件。
对webpack配置的具体代码如下：
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports={
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
hash: true,
filename: 'index.html',
}),
new MiniCssExtractPlugin({
filename:"./css/main.css"
})
],
modules:{
rules:[
{
test:/\.css$/,
use:[
{
loader: MiniCssExtractPlugin.loader},
{
loader:"css-loader",
options:{
importLoaders:2
}
},"less-loader","sass-loader"
]
}
]
}
}
另外，在生产环境中默认只会压缩js文件，不会压缩css文件，所以对其进行优化处理：
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin'); //压缩css文件
const TerserWebpackPlugin=require('terser-webpack-plugin'); //压缩js文件
module.exports={
optimization:{
minimizer:[
new OptimizeCssAssetsWebpackPlugin(),
new TerserWebpackPlugin()
]
},
}