webpack多页面打包
sophister opened this issue · comments
OptimizeCSSAssetsPlugin 会删除 css 的 浏览器兼容前缀 -webkit-
webpack 4
中新增了 mode
配置,默认是 production
,在 production
模式下,会自动设置 optimization.minimize: true
,我们在配置里,设置了 optimization.minimize
如下:
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: prod ? false : true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin()
],
然后在 postcss-loader
里,使用 autoprefixer
来自动添加浏览器兼容的前缀:
{
test: /(_\.sass)|(_\.scss)$/,
use:[
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: !!prod ? false : true, //
modules: true,
camelCase: true,
minimize: !!prod ? true : false,
localIdentName: '[name]__[local]--[hash:base64:5]'
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: prod ? false : true ,
plugins: (loader) => [
require('autoprefixer')(),
],
},
},
{
loader: "sass-loader",
options: {
sourceMap: prod ? false : true ,
includePaths: [
path.resolve(__dirname, '../src/'),
],
},
},
],
},
根据这个配置,发现在 development
下打包的 css
文件,兼容代码会自动添加上;但是在 production
下,却没有兼容的css代码!!
测试发现,OptimizeCSSAssetsPlugin
这个默认会删掉 css
中的浏览器前缀!必须要这样设置,明确的禁止OptimizeCSSAssetsPlugin
中删除前缀才行:
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: prod ? false : true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
autoprefixer: {
disable: true,
}
}
})
],
根据 这篇issue ,还有一些其他的配置项,还没找到文档都是什么作用……