# Webpack4
## 安裝
> webpack 4默認不需要配置文件（它吸收了Parcel的思想，零配置）
> - npm i -D webpack
> - npm i -D webpack-cli
## 使用
1.入口點/輸出文件
```
//package.json
"scripts": {
"build1": "webpack"
}
//cmd
npm run build1
//報錯: ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
```
說明webpack4正在尋找./src中的入口點（入口點是webpack尋找開始構建Javascript包的文件）
**webpack 4中，不需要定義入口點和輸出文件**
**webpack 4將./src/index.js作為默認入口點。 而且，它會在./dist/main.js中吐出這個包**
2.生產模式和開發模式
**webpack4無需任何配置文件**
**只需定義--mode標記，即可免費獲得一切**
```
"scripts": {
"dev":"webpack --mode development",
"build":"webpack --mode production"
}
```
> webpack1/2/3一般擁有2個配置文件
> - 開發配置文件: 用於定義webpack dev服務器和其他東西
> - 生產配置文件: 用於定義UglifyJSPlugin和sourcemaps等
## 更多特性
> - sideEffects 設置 —— 在打包體積上巨大的勝利
> - 支持 JSON 和 Tree Shaking
> - 升級到 UglifyJS2
> - 模塊類型的引入 + 支持 .mjs
> - javascript/auto: (在 webpack 3 默認啟用) 啟用了所有的 Javascript 模塊系統：CommonJS，AMD，ESM
> - javascript/esm: EcmaScript 模塊，所有的其他模塊系統不可用（默認 .mjs 文件）
> - javascript/dynamic: 只有 CommonJS 和，EcmaScript 模塊不可用
> - json: JSON 數據，它可以通過 require 和 import 來引入使用（默認 .json 的文件）
> - webassembly/experimental: WebAssembly模塊（當前為 .wasm 文件的實驗文件和默認文件）
> - 另外 webpack 現在支持查找 .wasm, .mjs, .js 和 .json 拓展文件來解析
> - 支持 WebAssembly
> - 去除 CommonsChunkPlugin