Webpack 4正式发布！从0配置到生产模式，你需要知道的都在这里了

webpack 4作为零配置模块捆绑器

webpack功能强大，有很多独特的功能，但其中一个难点是配置文件。

为中大型项目提供webpack的配置并不是什么大问题。然而，对于较小的项目来说，这很麻烦，特别是当你想要启动一些玩具应用时。

这就是Parcel得到了很多注意力的原因。

Sean和webpack团队改变了这一现状：webpack 4默认不需要配置文件！

下面让我们试试看。

创建一个新目录并进入它：

mkdir webpack-4-quickstart && cd $_

运行以下命令来初始化package.json：

npm init -y

现在让我们安装webpack 4。

npm i webpack --save-dev

我们还需要webpack-cli，它作为一个独立的包提供：

npm i webpack-cli --save-dev

现在打开package.json并添加一个构建脚本：

"scripts": {    "build": "webpack" }

保存并关闭文件

试着运行：

npm run build

会发现出现下面的提示：

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'

webpack 4正在寻找./src中的入口点！ 如果你不知道这意味着什么去看看我以前的文章《从Gulp切换到webpack》(https://www.valentinog.com/blog/from-gulp-to-webpack-quickstart/)。

简而言之：入口点是webpack寻找开始构建Javascript包的文件。

在之前的webpack版本中，入口点必须在名为webpack.config.js的配置文件中定义。

但是从webpack 4开始，不需要定义入口点：它会将./src/index.js作为默认值！

测试新特性非常简单，创建文件./src/index.js：

console.log(`I'm a silly antry point`);

然后再重新构建：

npm run build

你将会在 ~/ webpack-4-quickstart/dist/main.js中获得该软件包。

什么？先等等。居然不需要定义输出文件？

在webpack 4中，不需要定义入口点和输出文件。

我知道很多人并不那么激动。 Webpack的主要优势是代码拆分。但是相信我，使用零配置工具可以提高你的速度。

所以这是第一条：webpack 4不需要配置文件。

它会查找./src/index.js作为默认入口点。而且，它会在./dist/main.js中吐出这个包。

在下一节中，我们将看到webpack 4的另一个很好的特性：生产模式和开发模式。

webpack 4: 生产模式和开发模式

拥有2个配置文件是webpack中的常见模式。

一个典型的项目可能有：

一个用于开发的配置文件，用于定义webpack dev服务器和其他东西

* 用于生产的配置文件，用于定义UglifyJSPlugin和sourcemaps等

虽然更大的项目可能仍然需要2个文件，但是在webpack 4中，可以无需任何配置。

怎么会这样？

webpack 4引入了生产和开发模式。

事实上，如果你注意npm run build的输出，你会看到一个很好的警告：

The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.（“mode”选项尚未设置。将“mode”选项设置为“development”或“production”以启用此环境的默认值。）

什么意思？让我们来看看。

打开package.json并填入脚本部分，如下所示：

"scripts": {    "dev": "webpack --mode development",    "build": "webpack --mode production"  }

现在运行：

npm run dev

并看看./dist/main.js。你看到了什么？是的，我知道，一个无聊的包…没有缩小！

现在尝试运行：

npm run build

并看看./dist/main.js。你现在看到什么？一个缩小的包！

Yes!

生产模式可以实现各种优化。包括缩小，规模提升，tree-shaking等等。

另一方面，开发模式针对速度进行了优化，只不过是提供未缩小的捆绑包。

下面是第二条：webpack 4引入了生产和开发模式。

在webpack 4中，你可以不用一行配置！只需定义--mode标记，即可免费获得一切！

关于webpack更多的特性：

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

webpack 4作为零配置模块捆绑器

webpack 4: 生产模式和开发模式

关于webpack更多的特性：

更多相关文章

随机推荐