脚本宝典收集整理的这篇文章主要介绍了extract-text-webpack-plugin 打包css报错的解决,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
全局安装的webpack版本是v4.12.1,但是package.json引用的webpack版本是v3.6.0,install下来/node_modules/里面webpack版本是v3.12.0。
在控制台输入webpack -v,得到的结果是4.12.1。
这是webpack环境。
开始引入extract-text-webpack-plugin,默认的版本是v3.0.2,运行webpack报错:
$ webpack
(node:18800) DePRecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
C:UsersEEEAppDataRoamingnpmnode_moduleswebpacklibChunk.js:752
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks.groupsITerable and filter by instanceof Entrypoint instead
找了很多文章,都说是版本问题,下载了extract-text-webpack-plugin 4.0.0-beta.0版本,运行还是报错:
$ webpack
C:UsersEEEDesktopwebpacknode_modules_extract-text-webpack-plugin@4.0.0-beta.0@extract-text-webpack-plugindistindex.js:217
extractedChunk.addGroup(chunkGroup);
^
TyPEError: extractedChunk.addGroup is not a function
猜想会不会是webpack版本也需要升级,我删掉了package.json引用的webpack,打算使用全局webpack。
重新install,运行webpack,还是报错:
$ webpack
C:UsersEEEAppDataRoamingnpmnode_moduleswebpack-clibincli.js:244
throw err;
^
Error: Cannot find module 'webpack/lib/Chunk'
似乎必须要引入webpack,在Package.json再次引webpack,v4.12.0。
得到的/node_modules/下的webpack版本是v4.26.1。
再次执行webpack,这次成功了。
这是一次很简单的采坑,但是前后困扰了我好几天。
附配置文件:
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'bundle.js'
},
mode: 'production',
module: {
rules: [
{
test: /.css$/,
//loader: ['style-loader','css-loader']
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000*4,
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
package.json
{
"devDependencies": {
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.4",
"style-loader": "^0.23.1",
"url-loader": "^0.5.8",
"webpack": "^4.12.0"
}
}
以上是脚本宝典为你收集整理的extract-text-webpack-plugin 打包css报错的解决全部内容,希望文章能够帮你解决extract-text-webpack-plugin 打包css报错的解决所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。