webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题

1.  使用了extract-text-webpack-plugin插件后,编译出错,代码如下:

new ExtractTextPlugin('[name].css')

报错信息如下:

Tapable.plugin is deprecated. Use new API on `.hooks` instead 报错

webpack is watching the files…

(node:64840) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
1 77% module and chunk tree optimization bound /Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/webpack/lib/Chunk.js:824
throw new Error(
^ Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/webpack/lib/Chunk.js:824:9)
at /Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/extract-text-webpack-plugin/index.js:260:39
at Array.forEach (native)
at ExtractTextPlugin.<anonymous> (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/extract-text-webpack-plugin/index.js:255:11)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/tapable/lib/Hook.js:35:21)

解决方案:用的应该是webpack4吧,换成mini-css-extract-plugin就好了,用法:https://www.npmjs.com/package/mini-css-extract-plugin

2.使用new webpack.optimize.UglifyJsPlugin()时报错

如下代码:

new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),

报错信息如下:

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
at Object.get [as UglifyJsPlugin] (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/webpack/lib/webpack.js:174:10)
at Object.<anonymous> (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/build/webpack.config.js:106:25)
at Module._compile (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)

解决方案:

1. webpack内置的JS压缩插件不能使用了,可以安装uglifyjs-webpack-plugin插件,使用同其他非内置插件;

2. --mode production 表示生产环境,只要配置在package.json的script里面 js自动就压缩了

注意:Uglify是压缩js,现在已经不需要了,只需要在script里面写成 "build": "webpack --mode production", 就自动压缩了。

webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题的更多相关文章

  1. webpack4升级指南

    webpack4升级指南 鉴于图书项目编译速度极慢的情况(项目里面module太多了,编译慢很正常)且最近需求不多(很少出现的空挡期).所以我觉得搞一波webpack升级,看看有没有帮助.webpac ...

  2. 如何开发webpack plugin

    继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...

  3. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

  4. Webpack Plugin

    [Webpack Plugin] Since Loaders only execute transforms on a per-file basis, plugins are most commonl ...

  5. 案例实战之如何写一个webpack plugin

    案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...

  6. 揭秘webpack plugin

    前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...

  7. YYDS: Webpack Plugin开发

    目录 导读 一.cdn常规使用 二.开发一个webpack plugin 三.cdn优化插件实现 1.创建一个具名 JavaScript 函数(使用ES6的class实现) 2.在它的原型上定义 ap ...

  8. 基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...

  9. 当node升级后导致webpack打包出错,node-saas出问题的解决办法

    报错信息如下: ERROR in ./node_modules/_extract-text-webpack-plugin@3.0.2@extract-text-webpack-plugin/dist/ ...

随机推荐

  1. Ubuntu安装SSH SERVER

    apt-get update apt-get install openssh-server 安装好后查看SSH是否启动 打开”终端窗口”,输入”sudo ps -e |grep ssh“–>回车 ...

  2. elasticsearch6.7 01.入门指南(1)

    Elasticsearch 是一个高度可扩展且开源的全文检索和分析引擎.它可以让您快速.近实时地存储.检索以及分析海量数据.它通常用作那些具有复杂搜索功能和需求的应用的底层引擎或者技术. 下面是 El ...

  3. Why in the code “456”+1, output is “56”

    Question: #include <iostream> int main() { std::cout << "25"+1; return 0; } I ...

  4. Does the C standard guarantee buffers are not touched past their null terminator?

    Question: In the various cases that a buffer is provided to the standard library's many string funct ...

  5. C#特性之数据类型

    这篇文章主要通过演示类在不同发展中的不通过定义方法,来向读者表述它们之间的区别和联系. 在C#1时代,我们喜欢这样定义类: public class Product { private string ...

  6. echarts环形图,自定义说明文字

    一.代码 app.title = '已安装通讯盒电站统计'; option = { backgroundColor: '#0f0f31',//#0f0f31 title: { show:true, x ...

  7. Navicat安装及简单使用

    一.安装 下载完之后,直接解压出来就能用,看一下解压之后的目录: 双击打开下面这个文件(可以把它添加一个桌面快捷方式,或者添加到任务栏): 然后会提示你输入注册码: 回到navicat的解压出来的文件 ...

  8. Error running tomcatUnable to open debugger port (127.0.0.1 50181) java.net.B

    1.把tomcat删除,重新建一个,tomcat就会重新自动使用一个端口了 2.自己手动调一下端口 我用的是第二种,手动调了下,最开始的端口是:50181,该成了50182,就可以了.

  9. 关于<checkbox>checked默认问题

    这个问题困扰我有一段时间了,今天终于解决了. 接手现在的项目半个月了,我看之前的人写的<checkbox checked="false" />一直没有生效,但是需求上没 ...

  10. Ps—导出:sql作业配合ps导出csv文件

    $dateText=Get-Date #获取当前日期时间 $dateText = $dateText.ToShortDateString() #转为短日期格式(去掉时间部分) $checkDate=( ...