1.style-loader与css-loader
css-loader负责解析css相关文件。
style-loader负责在html文档中插入解析后的css文件。所以style-loader一定要在css-loader之后生效才可以
写法：[‘style-loader‘, ‘css-loader‘](webpack解析从后向前解析)
完整配置：
1 { 2 test: /.css$/, 3 use: [‘style-loader‘, ‘css-loader‘] 4 }
style-loader还有一些其他用法例如: 生成标签的位置。在生成css文件前可以做全局修改。可以定义生成的style的形式 例如link。
style新版本中 已经不支持insertAt语法了,以前的inserAt:‘top‘甚至insert: ‘top‘都是会报错的。建议直接阅读下面的文档。
文档地址：https://www.npmjs.com/package/style-loader
2.less-loader的配置
{
test: /.less$/,
use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘]
}
sass,stylus等css扩展语法也是一样的配置。切记配置的顺序，不能搞错
3.mini-css-extract-plugin插件
上面的配置以后，打包以后的css会形成style标签全部加载到html里面。当样式过多的时候，可能会造成阻塞。
所以我们应该使用插件将css从中抽离出来。
plugins：[
new MiniCssExtractPlugin({
filename: ‘a.css‘
})
],
module: {
rules: [
{
test: /\.js$/,
use: [‘babel-loader‘]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, ‘css-loader‘]
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, ‘css-loader‘, ‘less-loader‘]
}
]
}
以上的配置会将css和less最后都分离出来，最终命名为一个叫做a.css文件。如果想将less和普通css分离成两个文件，那么需要new两个插件对象，分别放在不同的rules里面。
3.postcss-loader和autoprefixer插件
这两个东西是给我们的css增加浏览器前缀的。使用方法：
需要在webpack.config.js同级目录下建立一个文件postcss.config.js
module.exports = {
plugins: [
require(‘autoprefixer‘)
]
}
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
module: {
rules: [
{
test: /\.js$/,
use: [‘babel-loader‘]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘]
},
{
test: /\.less$/,
use: [‘style-loader‘, ‘css-loader‘, ‘postcss-loader‘, ‘less-loader‘]
}
]
}
4.optimize-css-assets-webapck-plugin插件压缩css相关文件
optimization: {
minimizer: [
new OptimizeCssPlugin()
]
}
这个时候打包 会发现，抽离出来的css文件被压缩了。但是js文件不会被压缩了。
所以还需要手动压缩js文件：我们需要使用uglifyjs-webpack-plugin插件
optimization: {
minimizer: [
new UglifyjsWebpackPlugin({
cache: true, // 缓存
parallel: true, // 并发打包
sourceMap: true // 源码映射
}),
new OptimizeCssPlugin()
]
}
原文：https://www.cnblogs.com/fourthCities/p/11523705.html