细说webpack-3-webpackcli-零配置打包

jiezi

5 年前

大家好！我是萝卜，webpack 4 带来了大量的更新，其中一个就是 webpack 4 默认不需要配置文件，下面就带大家体验一下！

首先创建项目，创建一个名为 webpack 的文件夹，进入文件夹使用 npm init 进行初始化，代码如下：

// 创建目录并进入
mkdir webpack && cd $_
// 初始化项目
npm init -y
// 安装 webpack 以及 webpack-cli 到本地的开发依赖
npm i webpack -D
npm i webpack-cli -D

新建 src 目录，放置源码。

// 创建 src 目录
mkdir src
// 进入 src 目录下 创建 index.js
touch index.js tool.js

目录结构如下：

|---- src
    |---- index.js
    |---- tool.js

index.js 和 tool.js 两个文件内容如下：

// tool.js
module.exports = 'webpack';
// index.js
var str = require('./tool');
var hello = 'hello';
console.log(`${hello} ${str}`);

准备好以上内容后，我们在 webpack 目录下执行 npx webpack 命令，执行后，我们查看 webpack 目录下会生成一个 dist 目录，进入 dist 目录后会看到 main.js 文件，这个文件就是 webpack 打包压缩后的文件。

Tips: npx 是一个方便开发者访问 nodemodules 内的 bin 命令行的工具，npx webpack 相当于执行了
node_modules/webpack/bin/webpack，npx 在开发中非常方便，推荐安装：npm install -g npx。
到此我们可以发现 webpack 4 与之前版本的不同之处，在之前的版本中，必须在名为 webpack.config.js 的配置文件中，通过 entry 属性定义 entry point(入口点)，通过 output 属性定义 output file(输出文件)，在 webpack 4 中，既不必须定义 entry point(入口点)，也不必须定义 output file(输出文件)。入口点默认为 src 目录下的 index.js 文件，输出文件默认为 dist 目录下的 main.js 文件。

在通过命令 npx webpack 进行打包后，在控制台会出现一段警告⚠️：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

事实上，webpack 4 引入了 production(生产)和 development(开发)模式。我们可以在 package.json 中进行配置。

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

然后在 webpack 目录下执行：npx webpack -d 命令，然后进入 dist 目录下查看 main.js 文件，我们会发现这是一个没有经过压缩的文件，现在在返回 webpack 目录下，执行命令：npx webpack -p 命令，然后进入 dist 目录下查看 main.js 文件，我们发现一个已经经过压缩的 bundle。production mode(生产模式)可以开箱即用地进行各种优化，包括：压缩、作用域提升、tree-shaking 等。

如果我们要修改 webpack 的默认输出目录，需要用到 webpack 命令的 –output，我们将上面的 npm script 做下修改:

"scripts": {
  "dev": "webpack --mode development --output ./output/main.js",
  "build": "webpack --mode production --output ./output/main.js"
}

此时在执行 npx webpack -p，则 webpack 会将打包后的文件输出到 output/main.js 路径了。

这一章我们演示了使用 webpack-cli 命令来完成 webpack 的零配置打包，webpack-cli 命令的选项比较多，详细的可以查阅 webpack-cli 的文档，这里我总结了常用的最多几个选项：

webpack-cli 支持两个快捷选项：-d 和 -p，分别代表开发环境和生产环境的打包。

可以通过参数 –display-error-details 来打印错误信息：npx webpack –display-error-details。

可以通过命令：npx webpack –progress –colors 让编译输出的内容带有进度和颜色。

如果不想每次修改模块后都重新编译，则可以开启监听模式，开启后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的：npx webpack –watch.

通过 -hot 选项开启 Hot Module Replacement 模式。

通过 -profile 选项详细的输出每个环节的用时，排查打包速度瓶颈。

通过 -config 指定一个 webpack 配置文件的路径。

细说webpack-3-webpackcli-零配置打包

初始化项目

创建目录

production(生产) 和 development(开发) 模式

修改打包输出目录

小结