【转】webpack4
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的更多相关文章
- mini-css-extract-plugin 的用法(webpack4)
今天在使用webpack的extract-text-webpack-plugin插件提取单独打包css文件时,报错,说是这个插件要依赖webpack3的版本. 后面查了一下,webpack4得使用mi ...
- webpack4: compilation.mainTemplate.applyPluginsWaterfall is not a function 解决方法
今天捣鼓webpack4踩到一个弥天大坑:使用html-webpack-plugin打包html的时候一直报 compilation.mainTemplate.applyPluginsWaterfal ...
- webpack4新特性介绍
导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件.借助loaders和plugins,它可以改变.压缩和优化各种各样的文件.它的输入是不同的资源,比如 ...
- webpack4.1.1的使用详细教程
安装全局webpack cnpm install -g webpack 安装全局webpack-cli npm install -g webpack-cli 初始化:生成package.json文件 ...
- webpack4.x配置详解,多页面,多入口,多出口,新特性新坑!!
花了差不多一天多的时间,重新撸了一遍webpack4.x的常用配置. 基本上常用的配置都熟悉了一遍,总体上来讲,为了对parcel进行反击,webpack从4.x开始,正在朝着尽可能的简化配置文件的方 ...
- webpack4 splitChunksPlugin && runtimeChunkPlugin 配置杂记
webpack2 还没研究好,就发现升级到4了,你咋这么快~ 最近要做项目脚手架,项目构建准备重新做,因为之前写的太烂了...然后发现webpack大版本已经升到4了(又去看了一眼,4.5了),这么快 ...
- webpack4:连奏中的进化
webpack4在2月底的时候发布,这次webpack4有了一个名字"Legato",也就是"连奏"的意思,寓意webpack在不断进化,而且是无缝(no-ga ...
- React从入门到放弃之前奏(1):webpack4简介
接触webpack是好久之前的事情了,最近看了下webpack没想到都到4了. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 会创建1个 ...
- 带你由浅入深探索webpack4(二)
在前一篇文章已经介绍了webpack4从入门到一些核心常用的用法,大家可以从上一篇文章看起.带你由浅入深探索webpack4(一) 接着上一章,接下来我们会继续探讨webpack4中的各种实用用法,让 ...
- webpack4打包nodejs项目进阶版——多页应用模板
前段时间我写了个打包nodejs项目的文章,点击前往 但是,问题很多.因为之前的项目是个历史遗留项目,重构起来可能会爆炸,当时又比较急所以就写个的适用范围很小的webpack的打包方法. 最近稍微得空 ...
随机推荐
- jwplayer
将JW Player嵌入到网页中非常的简单,只需要进行如下3个步骤: 1.解压mediaplayer-viral.zip文件,将jwplayer.js和player.swf文件拷贝到工程中: 2.在页 ...
- v-if和v-show的区别以及callback回调函数的体会
今天总结一下最近一周碰到的一些问题 一.v-if和v-show的区别 v-show用的是css属性中的display="block/none",元素被隐藏了但是节点还在页面中,但是 ...
- vue webpack 懒加载
自己项目中的写法 const router = new Router({ routes: [ { path: '/index', component: (resolve) => { requir ...
- CPU运行的流程
- zabbix service安装配置
1.安装时间同步 yum -y install ntpdate systemctl start ntpdate.service systemctl enable ntpdate.service 2.安 ...
- 老刘的Linux小课堂开课了
经过几个月的等待,刘遄老师的LINUX课堂终于开课了,从现在开始,我会在博客里将每一堂课的笔记记录下来,记录自己的每一步成长. 由于是第一次开课,老刘只是简单的介绍了LINUX相关的一些概念,比如开源 ...
- python核心编程2 第十一章 练习
11-2 函数.结合你对练习5-2的解,以便你创建一个带一对相同数字并同时返回它们之和以及产物的结合函数. multiply = lambda x, y: x * y if __name__ == ' ...
- JAVAOOP多线程
进程每个独立运行的任务对应一个进程,每个进程可以产生多个线程 特点:1,进程是系统运行程序的基本单位 2,每一个进程都有自己独立的一块内存空间,一组系统资源 3,每一个进程的内部数据和状态都是完全独立 ...
- SHOPEX快递单号查询插件圆通V8.2专版
SHOPEX快递物流单号查询插件特色 本SHOPEX快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅急送快递.德邦物流.百世 ...
- ZooKeeper(2)-安装和配置
一.下载 https://zookeeper.apache.org/ 二.本地模式安装 1.安装前准备 (1)安装Jdk (2)拷贝Zookeeper安装包到Linux系统下 (3)解压到指定目录 . ...