webpack4強勢來襲

# 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包的文件)javascript

**webpack 4中,不須要定義入口點和輸出文件**java

**webpack 4將./src/index.js做爲默認入口點。 並且,它會在./dist/main.js中吐出這個包**webpack

2.生產模式和開發模式
**webpack4無需任何配置文件**
**只需定義--mode標記,便可免費得到一切**
```
"scripts": {
"dev":"webpack --mode development",
"build":"webpack --mode production"
}
```
> webpack1/2/3通常擁有2個配置文件
> - 開發配置文件: 用於定義webpack dev服務器和其餘東西
> - 生產配置文件: 用於定義UglifyJSPlugin和sourcemaps等web

## 更多特性
> - 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
> - 去除 CommonsChunkPluginnpm

相關文章
相關標籤/搜索