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

翻译:疯狂的技术宅 原文作者:sokra 原文链接:https://hackernoon.com/webpack-4-tutorial-all-you-need-to-know-from-0-conf-to-production-mode-d32759d0dc2d

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

原文发布于微信公众号 - 京程一灯(jingchengyideng)

原文发表时间:2018-02-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券