webpack4.0 中使用extract-text-webpack-plugin报错？？Error: Path variable [contenthash] not implemented in this context: [name].[contenthash].css
Error: Path variable [contenthash] not implemented in this context: [name].[contenthash].css
林无语
2018-07-16
4 回答
在之前版本中我们使用extract-text-webpack-plugin来提取CSS文件，不过在webpack 4.x中则应该使用mini-css-extract-plugin来提取CSS到单独文件中
基于webpack 3.0的Vue项目
const ExtractTextPlugin = require('extract-text-webpack-plugin')
config.module.rules.push(
{
test:/\.styl(us)?$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:[
'css-loader',
{
loader:'postcss-loader',
options:{
sourceMap:true
}
},
'stylus-loader'
]
})
})
config.plugins.push(
new ExtractTextPlugin('styles.[hash:8].css')
)基于webpack 4.0的Vue项目
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
config.module.rules.push(
{
test:/\.styl(us)?$/,
use:[
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'postcss-loader',
options:{sourceMap:true}
},
'stylus-loader'
]
}
config.plugins.push(
new MiniCssExtractPlugin(
{
filename: 'styles.[contenthash:8].css'
}
)
)
util.js
删掉 ExtractTextPlugin，改用 MiniCssExtractPlugin
```
if (options.extract) {
let extractLoader = {
loader: MiniCssExtractPlugin.loader,
options: {}
}
return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders)
} else {
return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders)
}
```
举报
0/150
提交
取消
