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包的文件）

**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