webpack 4教程：从0配置到生产模式，你需要知道的都在这里了

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

英文原版:https://hackernoon.com/webpack-4-tutorial-all-you-need-to-know-from-0-conf-to-production-mode-d32759d0dc2d

转载地址:https://www.viewnode.com/archives/webpack-4-tutorial-all-you-need-to-know-from-0-conf-to-production-mode.html