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

字节弦歌者
• 阅读 7317

全局安装的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:\Users\EEE\AppData\Roaming\npm\node_modules\webpack\lib\Chunk.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:\Users\EEE\Desktop\webpack\node_modules\_extract-text-webpack-plugin@4.0.0-beta.0@extract-text-webpack-plugin\dist\index.js:217
            extractedChunk.addGroup(chunkGroup);
                           ^

TypeError: extractedChunk.addGroup is not a function

猜想会不会是webpack版本也需要升级,我删掉了package.json引用的webpack,打算使用全局webpack。
重新install,运行webpack,还是报错:

$ webpack
C:\Users\EEE\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.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"
  }
}
点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
代码哈士奇 代码哈士奇
3年前
webpack5构建一个简单的vue项目 (练习)
webpack5构建vue必要环境安装ndejs我们需要安装node如果没有安装则安装安装过则跳过执行nodevnpmv初始化项目文件夹新建一个空的项目执行npminity初始化npminity会生成一个package.json安装webpack以及htmlwebpackplugin控制台执行npmiwebpackwebpackcliwebpackdevserverhtmlwebpackpluginD安装babelloaderbabel可以将我们的代码向下
晴空闲云 晴空闲云
4年前
webpack配置typescript详解
随着现在typescript使用越来越多,作为打包工具界的webpack怎么编译typescript呢?下面我把自己的实践记录一下,成功编译了typescript文件,并且引入typescript模块后,也可以成功编译。我们从新建webpack项目开始,在此之前先贴一下环境,经常环境不同会造成不同的状况,这边先贴上的环境:$nodevv14.15.4$
Jacquelyn38 Jacquelyn38
4年前
React.js中JSX的原理与关键实现
在开始开发之前,我们需要创建一个空项目文件夹。安装1.初始化npm init y2.安装webpack相关依赖npm install webpack webpackcli D3.安装babelloader相关依赖npm install babelloader @babel/core @babel/presetenv D4.
Wesley13 Wesley13
4年前
vite2 引入 vectorize
这个库在webpack中是正常的,但是在vite2项目中无法使用也不报错,只是结果总是空....看了下是个老项目了,依赖的也都是好几年没更新的库...看来webpack在兼容性方面还是要强不少的    尝试使用parcel打包后使用,不太行...用webpack打包后使用....也不行...有时间再研究研究,看看能不能写个类似的.
可莉 可莉
4年前
'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文
运行项目时报错: 'webpack'不是内部或外部命令,也不是可运行的程序或批处理文因为当时报错到时候没截图,我这里就不放图片了报这个错时因为没有全局安装webpack,解决方法:1.确保nodeJS已安装2\.找到nodejs目录,我的目录是图片上这个,你的可能不一样,看下有没有以下两个文件,没有就新建!(https://
Easter79 Easter79
4年前
TypeScript 文件引入 Html (ts import html webpack)
我们的目标是把html引入ts文件,webpack打包时就能把html打进js文件,减少文件加载啦1安装textloadernpminstalltextloadersavedev2webpack配置里新增textloader为文本加载器module:{rules:
可莉 可莉
4年前
18个常用 webpack插件,总会有适合你的!
!(https://oscimg.oschina.net/oscnet/71317da0c57a8e8cf5011c00e302a914609.jpg)来源| https://github.com/Michaellzg/myarticle/blob/master/webpack/Plugin何为插
Stella981 Stella981
4年前
IE9样式错乱,IE11无法正常加载v
1.第一步:安装babelployfill(已安装请跳过此步骤)yarnaddbabelployfill2.修改webpack打包配置文件:webpack.bash.conf.js//引入babelployfillvarbabelPloy
Easter79 Easter79
4年前
'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文
运行项目时报错: 'webpack'不是内部或外部命令,也不是可运行的程序或批处理文因为当时报错到时候没截图,我这里就不放图片了报这个错时因为没有全局安装webpack,解决方法:1.确保nodeJS已安装2\.找到nodejs目录,我的目录是图片上这个,你的可能不一样,看下有没有以下两个文件,没有就新建!(https://
字节弦歌者
字节弦歌者
Lv1
雨纷纷旧故里草木深我听闻你始终一个人
文章
4
粉丝
0
获赞
0