extract-text-webpack-plugin 打包css报错的解决

发布时间:2019-07-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。