webpack4.0.1的坑，持续补充

小咪咪 2022-05-30 04:50 158阅读 0赞

webpack4在2月底正式发布后，原来的很多做法不能使用，下面把使用webpack4.0.1过程中，出现的问题，一一记录，也欢迎大家补充，谢谢！团结就是力量，众人拾柴火焰高，加油！

关于webpack4.0.1的安装问题，可以查看我的另外一篇文章[webpack4.0.1安装问题和webpack.config.js的配置变化][webpack4.0.1_webpack.config.js]

1、不再支持node.js4.X

2、不能用webpack命令直接打包指定的文件，只能使用webpack.config.js进行配置。

即：webpack  demo01.js  bundle01.js 不能用了。

3、CLI被移动到了一个专门的包 webpack-cli里了。

全局安装webpack-cli

命令：npm install webpack-cli -g

4、本地（项目目录）下安装webpack，

###      命令：npm install webpack -D ###

5、在webpack.config.js里的配置，不再支持 module下的loaders，需要把loaders改成rules。

如下：

module: \{

rules: \[  
            //针对css文件，进行对应的loader处理  
            \{ test: /\\.css$/, loader: "style-loader!css-loader" \}  
        \]

\}

7、json

webpack 现在能原生地处理 JSON

允许通过 ESM 语法导入 JSON

8、优化：

更新 uglifyjs-webpack-plugin 至 v1 版本，以支持 ES2015

9、Usage

现在可以在两种模式中选择 (mode or --mode) : 生产模式或开发模式

10、配置：

NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生产模式下默认开启)  
       ModuleConcatenationPlugin -> optimization.concatenateModules (开发模式下默认开启)  
       NamedModulesPlugin -> optimization.namedModules (开发模式下默认开启)  
       CommonsChunkPlugin 已被移除 -> optimization.splitChunks, optimization.runtimeChunk

11、Syntax

import() 总是返回一个命名空间对象。CommonJS 模块被封装到默认导出中

12、还有一个坑，暂时还没有解决，正在研究：

用 import Vue from "vue";  引入vue有问题，

但是改成

import Vue from "vue/dist/vue.js";

是可以用的。

[webpack4.0.1_webpack.config.js]: http://blog.csdn.net/jiang7701037/article/details/79403637

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript基本语法（持续补充）

![在这里插入图片描述][e74ebbddecd44672838910005d686842.jpeg_pic_center] -------------------- 文

川长思鸟来/ 2024年04月03日 12:58/ 0 赞/ 95 阅读

相关 mybatis框架常见注解（持续补充）

mybatis 1.@MapperScan 2.@Mapper 3.@Insert 4.@Delete

灰太狼/ 2024年03月30日 16:33/ 0 赞/ 114 阅读

相关 webpack5 踩坑日记（持续更新~~）

文章目录前言一、打包图片资源时问题1：

Love The Way You Lie/ 2022年12月26日 15:21/ 0 赞/ 334 阅读

相关 lombok不生效问题（持续补充）

下面的步骤都是网上收集的，我也不知道为什么，先记着吧先是plugins里面要从market去下载和安装好。 ![在这里插入图片描述][202009171557316

男娘i/ 2022年11月17日 05:05/ 0 赞/ 171 阅读

相关 position float(持续补充中。。。)

其实在之前的有一篇博客里已经写过了，但是这里还是要再详细描述下，因为它真的很重要啊在前端工作中，position float的使用频率可以说非常的高，本

迷南。/ 2022年07月15日 01:55/ 0 赞/ 202 阅读

相关 webpack4.0.1的坑，持续补充

webpack4在2月底正式发布后，原来的很多做法不能使用，下面把使用webpack4.0.1过程中，出现的问题，一一记录，也欢迎大家补充，谢谢！团结就是力量，众

小咪咪/ 2022年05月30日 04:50/ 0 赞/ 159 阅读

相关知识图谱资料索引(持续补充）

1、相关概念： RDF：一个RDF文件包含多个资源描述，而一个资源描述是由多个语句构成，一个语句是由资源、属性类型、属性值构成的三元组，表示资源具有的一个属性。

浅浅的花香味﹌/ 2022年05月29日 07:29/ 0 赞/ 297 阅读

相关目标检测模型发展史（持续补充）

对于目标检测，传统的是基于滑动窗+分类模型；而基于深度学习的有如下分类：基于候选区域的，如R-CNN，SPP-net，Fast R-CNN，Faster R-

素颜马尾好姑娘i/ 2022年04月05日 18:52/ 0 赞/ 568 阅读

相关 Linux初窥门径【持续补充】

1. 常用基本命令 i. 文件操作 <table> <thead> <tr> <th>命令</th> <th>参数</th> <t

╰半夏微凉°/ 2022年03月02日 19:10/ 0 赞/ 304 阅读

相关 Navicat 的用法整理---持续补充

1、预览操作的SQL语句 ![1713726-20190814194938154-951322687.png][] 转载于:https://www.cnblogs.c

淩亂°似流年/ 2021年10月01日 05:16/ 0 赞/ 286 阅读