webpack4发布新特性：零配置文件的模块打包器

2018-09-2908:04:58WEB前端开发Comments3,850 views字数 4627阅读模式

webpack4发布新特性：零配置文件的模块打包器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4 已经发布了！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

这个当今最流行的模块打包器做了大量更新。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4 带来了什么是新特性？大规模的性能改进，零配置和智能的默认设置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

这篇文章是对 webpack 4 的生动的介绍。并且会不断更新。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

您可以按文章每个部分的顺序构建一个有效的 webpack 4 环境。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

但随意跳过教程的某个部分！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4 作为零配置模块打包器

webpack 功能强大，具有许多独特的功能，但其中一个难点就是配置文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

为中型到大型项目提供 webpack 配置并不是什么大问题。 没有它感觉你无法活了。然而，对于小一点的项目来说，这有点烦人，尤其是当你想启动一些玩玩的应用的时候。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

这就是为什么 Parcel 获得了很多吸引的眼球。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

现在是突发新闻：webpack 4 默认不需要配置文件！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

让我们尝试一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4：从零配置开始

创建一个新目录并进入该目录：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. mkdir webpack-4-quickstart && cd $_

通过运行以下命令初始化 package.json ：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. npm init -y

并引入 webpack 4：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. npm i webpack --save-dev

我们还需要 webpack-cli ，作为一个单独的包引入：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. npm i webpack-cli --save-dev

现在打开 package.json 并添加一个 build(构建) 脚本：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

package.json 代码:
  1. "scripts": {
  2. "build": "webpack"
  3. }

尝试运行：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. npm run build

看看会发生什么：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

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

webpack 4 在 ./src 中寻找 entry point(入口点) ！ 如果您不知道这意味着什么，请查看 官方的说明文档 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

简而言之： entry point(入口点) 是 webpack 寻找开始构建 Javascript 包的文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

在以前版本的 webpack 中，必须在名为 webpack.config.js 的配置文件中 通过 entry 属性定义 entry point(入口点) 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

但是 从 webpack 4 开始，不再必须定义 entry point(入口点) ：它将默认为 ./src/index.js ！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

测试这个新功能很简单。 创建 ./src/index.js：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

index.js 代码:
  1. console.log(`I'm a silly entry point`);

然后运行构建命令：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. npm run build

您将在 ~/webpack-4-quickstart/dist/main.js 中获取该 bundle(包) 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

什么？ 稍等片刻。 没有必要定义输出文件？ 对的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

在 webpack 4 中，既不必须定义 entry point(入口点) ，也不必须定义 output file(输出文件)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 的主要优势在于 code splitting(代码拆分）。 但请相信我，使用零配置工具可以加快速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

所以这是第一条新闻：webpack 4 不是必须要有配置文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

它将查找 ./src/index.js 作为默认入口点。 而且，它会在 ./dist/main.js 中输出模块包。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

在下一节中，我们将看到 webpack 4 的另一个不错的功能：生产和开发模式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4：production(生产) 和 development(开发) 模式

拥有2个配置文件在 webpack 中是的常见模式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

一个典型的项目可能有：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

  • 用于开发的配置文件，用于定义 webpack dev server 和其他东西
  • 用于生产的配置文件，用于定义UglifyJSPlugin，sourcemaps 等

虽然较大的项目可能仍然需要 2 个配置文件，但在 webpack 4 中，您可以在没有一行配置的情况下完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

怎么会这样？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4 引入了 production(生产) 和 development(开发) 模式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

事实上，如果你注意 npm run build 的输出，你会看到一个很好的警告：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack4发布新特性：零配置文件的模块打包器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.
“模式”选项尚未设置。 将 “mode” 选项设置为 “development” 或 “production” 以启用此环境的默认值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

那是什么意思？ 让我们来看看。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

打开 package.json 并填充 script 部分，如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

package.json 代码:
  1. "scripts": {
  2. "dev": "webpack --mode development",
  3. "build": "webpack --mode production"
  4. }

现在尝试运行：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. npm run dev

并看看 ./dist/main.js 。 你看到了什么？ 是的，我知道，一个令人厌烦的 bundle(包) 文件…，没有压缩！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

现在尝试运行：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. npm run build

再来看看 ./dist/main.js 。 你现在看到了什么？ 一个 压缩后的 bundle(包)！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

是的!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

production mode(生产模式) 可以开箱即用地进行各种优化。 包括压缩，作用域提升，tree-shaking 等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

另一方面，development mode(开发模式)针对速度进行了优化，仅仅提供了一种不压缩的 bundle 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

所以这是第二条新闻：webpack 4 引入了 production(生产) 和 development(开发) 模式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

在 webpack 4 中，您可以在没有一行配置的情况下完成任务！ 只需定义 –mode 参数即可免费获得所有内容！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4：覆盖默认 entry(入口)/output(输出)

我喜欢 webpack 4 零配置，但如何覆盖默认 entry point(入口点) 和 默认 output(输出) 呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

在 package.json 中配置它们！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

这是一个例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

package.json 代码:
  1. "scripts": {
  2. "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  3. "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
  4. }

webpack 4：用 Babel 转译 Javascript ES6

webpack4发布新特性：零配置文件的模块打包器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

现代 Javascript 主要是用 ES6 编写的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

但并非每个浏览器都知道如何处理 ES6 。 我们需要某种转换。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

这个转换步骤称为 transpiling(转译)。 transpiling(转译)是指采用 ES6 并使旧浏览器可以理解的行为。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

Webpack 不知道如何进行转换但是有 loader(加载器) ：将它们视为转译器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

babel-loader 是一个 webpack 的 loader(加载器)，用于将 ES6 及以上版本转译至 ES5 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

要开始使用 loader ，我们需要安装一堆依赖项。 尤其是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

  • babel-core
  • babel-loader
  • babel-preset-env 用于将 Javascript ES6 代码编译为 ES5

我们开始动手吧：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. npm i babel-core babel-loader babel-preset-env --save-dev

接下来，通过在项目文件夹中创建名为 .babelrc 的新文件来配置 Babel ：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

.babelrc 代码:
  1. {
  2. "presets": [
  3. "env"
  4. ]
  5. }

此时我们有2个配置 babel-loader 的选项：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

  • 使用 webpack 的配置文件
  • 在你的 npm scripts 中使用 --module-bind

是的，我知道你在想什么。 webpack 4 将自己作为零配置工具推向市场。 为什么要再次编写配置文件？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4 中零配置的概念适用于：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

  • entry point(入口点) 默认为 ./src/index.js
  • output(输出) 默认为 ./dist/main.js
  • production(生产) 和 development(开发) 模式 （无需为生产和开发环境创建2个单独的配置）

这就够了。 但是对于在 webpack 4 中使用 loader(加载器)，您仍然需要创建配置文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

我问过 Sean 这件事：webpack 4 中的加载器是否与 webpack 3 相同？ 有没有计划为像 babel-loader 这样的普遍使用的 loader(加载器) 提供零配置？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

他的回答是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

“对于未来（在v4之后，可能是4.x或5.0），我们已经开始探索预置或附加系统将如何帮助定义它。我们不想要的是:尝试将一堆东西作为默认设置插入到 core 中，我们想要的是:允许其他人扩展“文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

现在你仍然必须依赖 webpack.config.js。 让我们来看看…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4：通过配置文件使用 babel-loader

给 webpack 添加一个配置文件，以最经典的方式使用 babel-loader。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

创建一个名为 webpack.config.js 的新文件并配置 loader(加载器) ：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack.config.js 代码:
  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.js$/,
  6. exclude: /node_modules/,
  7. use: {
  8. loader: "babel-loader"
  9. }
  10. }
  11. ]
  12. }
  13. };

除非您要自定义 entry point(入口点) ，否则无需指定它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

接下来打开 ./src/index.js 并编写一些 ES6 代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

index.js 代码:
  1. const arr = [1, 2, 3];
  2. const iAmJavascriptES6 = () => console.log(...arr);
  3. window.iAmJavascriptES6 = iAmJavascriptES6;

最后，创建 bundle(包)：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

CommandLine 代码:
  1. npm run build

现在看一下 ./dist/main.js 来查看转换后的代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

webpack 4：不通过配置文件使用 babel-loader（在 npm scripts 中使用）

还有另一种方法来使用 webpack 的 loader(加载器)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

--module-bind 参数允许你在命令行指定加载器。 谢谢 Cezar 指出这一点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

该参数不是特定于 webpack 4 的。 从版本 3 开始就有了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

要在没有配置文件的情况下使用 babel-loader ，请在 package.json 中配置你的 npm scripts，如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

package.json 代码:
  1. "scripts": {
  2. "dev": "webpack --mode development --module-bind js=babel-loader",
  3. "build": "webpack --mode production --module-bind js=babel-loader"
  4. }

你可以再出运行 npm run build 构建项目。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

我不喜欢这种方法（我不喜欢增加 npm scripts 的复杂性），但它仍然很有趣。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5912.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/5912.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定