Webpack 4.0发布了！！
Webpack 4.0发布了！！！
前端界最流行的模块管理库webpack又更新了一个大版本！！！
让我们看看这次带来了什么新特性吧！大量的性能提升，零配置，健全的默认设置。
img
webpack 4： 零配置
过去我们在使用webpack都需要提供一个配置文件，在大项目中可能觉得没什么，但在小项目中就会觉得很繁琐。于是，webpack团队在此次更新中解决了这个问题：webpack 4 doesn't need a configuration file by default!
让我们动手试试吧！
新建一个目录webpack-4-quickstart，然后安装webpack
mkdir webpack-4-quickstart && cd $_
npm init -y
npm i webpack webpack-cli --save-dev
webpack4需要安装webpack-cli
编辑package.json，添加一个build命令
"scripts": {
"build": "webpack"
}
运行npm run build，看看发生了什么？
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
噢！webpack4 会尝试在./src中寻找入口文件，以前我们需要在webpack.config.js中定义entry，而在webpack4中它会默认定义./src/index.js为入口文件。
既然入口文件有默认值了，那output是什么呢？答案是./dist/main.js
留意刚才的错误提示中，还有一个WARNING，这又是webpack4的一个新特性。不着急，马上给你解释！
webpack 4： 开发与生产模式
以前我们使用webpack，通常需要定义两个配置文件，一个用于development环境，一个用于生产环境。
- development中，我们用于通常要配置webpack-dev-server和一些杂七杂八的设置
- production中，则需要配置UglifyJSPlugin, sourcemaps等
所以有了前面我们看到的那个大写的WARNING！！
打开package.json，修改一下scripts：
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
再运行一次npm run build，我们可以发现这次的./dist/main.js比之前明显体积变小了有木有！
Production mode做了些什么事情呢？主要有minification, scope hoisting, tree-shaking等等。对应的Development mode则主要是优化编译速度，输出一个没有压缩的文件。
简单讲完这零配置和打包模式的新特性，我们接下来了解一下在实际运用中的一些新特性吧！
webpack 4：使用Babel转换ES6语法
虽然ES6标准已经出来挺长一段时间了，但是许多浏览器还是不能完全支持新的语法及API。于是我们要想办法将ES6让那些老旧的浏览器支持。webpack并不会替我们完成这个工作，但是它有各种loaders可用于转化我们的代码。
babel-loader就是用于将ES6或更高版本标准的JS转换成ES5的loader。
如何使用它，我们需要添加几个依赖包：babel-core，babel-loader，babel-preset-env
npm i babel-core babel-loader babel-preset-env --save-dev
然后在根目录新建一个.babelrc来指定Babel的配置：
{
"presets": ["env"]
}
你可能会提出疑问了，不是说webpack4不需要配置文件了吗？
科科，webpack4 零配置只是说了不用你定义entry和output而已啦~
目前来说，你要用loaders还是需要创建配置文件的。至于未来会不会提供一些公用的loaders这个不好说，我们还是乖乖地新建一个webpack.config.js吧~
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
接下来你可以尝试在./src/index.js中写一些ES6了，运行npm run build然后看看转换后的代码。
到这里有些倔强的童鞋要举手发言了，劳资就是不想用config.js不行吗？可以！满足你！我们可以用--module-bind，不过这其实不是webpack4的特性，在webpack3的时候就有了。怎么用呢？
编辑package.json：
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader"
}
满意了吧？反正我个人不太喜欢这种fat scripts的做法。
总结一下更新的内容
- Environment
- 不再支持node.js v4
- Syntax
- import()总是返回一个命名空间的对象。CommonJS模块被封装到默认导出中
先写到这里吧，后面有时间再分享一下webpack4带来的其他新东西~
=================================================
更新2018-03-07
CommonsChunkPlugin
webpack4 去掉了CommonsChunkPlugin（RIP CommonsChunkPlugin），取而代之为optimization.splitChunks 和
optimization.runtimeChunk这两个配置。下面我们来看看它是如何工作的。
webpack4默认为大部分用户提供了不错的配置。需要注意的是，这些默认配置只会异步请求的模块进行提取拆分，如果要对entry进行拆分的话，可以用optimization.splitChunks.chunks: "all"。
webpack默认会按以下规则进行拆分提取：
- 新模块多处引用或者是来自
node_modules的包 - 新模块的大小（压缩前）超过30KB
- 并发请求数低于或等于5
- 初始页面加载的并发请求数低于或等于3
配置
- cache group
- naming
- select chunks
- select modules
