webpack4.0.1的坑

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

关于webpack4.0.1的安装问题，可以查看我的另外一篇文章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";

是可以用的。