1.2.4 自定义 Webpack 配置

实际上，webpack-cli 给我们提供了丰富的终端命令行指令，可以通过 webpack --help来查看：

[felix] 03-try-webpack $ npx webpack --help
Usage: webpack [entries...] [options]
Alternative usage to run commands: webpack [command] [options]

The build tool for modern web applications.

Options:
  -c, --config <value...>                Provide path to a webpack configuration file e.g. ./webpack.config.js.
  --config-name <value...>               Name of the configuration to use.
  -m, --merge                            Merge two or more configurations using 'webpack-merge'.
  --env <value...>                       Environment passed to the configuration when it is a function.
  --node-env <value>                     Sets process.env.NODE_ENV to the specified value.
  --progress [value]                     Print compilation progress during build.
  -j, --json [value]                     Prints result as JSON or store it in a file.
  -d, --devtool <value>                  Determine source maps to use.
  --no-devtool                           Do not generate source maps.
  --entry <value...>                     The entry point(s) of your application e.g. ./src/main.js.
  --mode <value>                         Defines the mode to pass to webpack.
  --name <value>                         Name of the configuration. Used when loading multiple configurations.
  -o, --output-path <value>              Output location of the file generated by webpack e.g. ./dist/.
  --stats [value]                        It instructs webpack on how to treat the stats e.g. verbose.
  --no-stats                             Disable stats output.
  -t, --target <value...>                Sets the build target e.g. node.
  --no-target                            Negative 'target' option.
  -w, --watch                            Watch for files changes.
  --no-watch                             Do not watch for file changes.
  --watch-options-stdin                  Stop watching when stdin stream has ended.
  --no-watch-options-stdin               Do not stop watching when stdin stream has ended.

Global options:
  --color                                Enable colors on console.
  --no-color                             Disable colors on console.
  -v, --version                          Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and
                                         commands.
  -h, --help [verbose]                   Display help for commands and options.

Commands:
  build|bundle|b [entries...] [options]  Run webpack (default command, can be omitted).
  configtest|t [config-path]             Validate a webpack configuration.
  help|h [command] [option]              Display help for commands and options.
  info|i [options]                       Outputs information about your system.
  serve|server|s [entries...]            Run the webpack dev server. To see all available options you need to install
                                         'webpack-dev-server'.
  version|v [commands...]                Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and
                                         commands.
  watch|w [entries...] [options]         Run webpack and watch for files changes.

To see list of all supported commands and options run 'webpack --help=verbose'.

Webpack documentation: https://webpack.js.org/.
CLI documentation: https://webpack.js.org/api/cli/.
Made with ? by the webpack team.

可是命令行不方便也不直观，而且还不利于保存配置的内容。因此，webpack 还给我们提供了通过配置文件，来自定义配置参数的能力。

03-try-webpack/webpack.config.js

module.exports = {
 entry: './src/index.js',

 output: {
 filename: 'bundle.js',

 // 输出文件夹必须定义为绝对路径
 path: './dist'
 },

 mode: 'none'
}

在项目目录下运行 npx webpack, 可以通过配置文件来帮我们打包文件。

[felix] 03-try-webpack $ npx webpack
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./dist" is not an absolute path!
   -> The output directory as **absolute path** (required).

我们发现，打包并没有成功，因为 webpack 要求我们打包配置 output.path 的路径必须为绝对路径，通过 path 模块来定义输出路径为绝对路径：

03-try-webpack/webpack.config.js

const path = require('path')
module.exports = {
 entry: './src/index.js',

 output: {
 filename: 'bundle.js',

 // 输出文件夹必须定义为绝对路径
 path: path.resolve(__dirname, './dist')
 },

 mode: 'none'
}

再次输入打包命令：

[felix] 03-try-webpack $ npx webpack
asset bundle.js 3.15 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 180 bytes
  ./src/index.js 77 bytes [built] [code generated]
  ./src/hello-world.js 103 bytes [built] [code generated]
webpack 5.54.0 compiled successfully in 81 ms

打包成功！

1.2.5 重新运行项目

项目文件通过 webpack 打包好了，可是我们在浏览器运行 index.html提示如下错误：

这是因为页面引用的JS代码，在浏览器里不能正确解析了，我们得去引用打包好了的JS才对。修改index.html

03-try-webpack/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千锋大前端教研院-Webpack5学习指南</title>
</head>
<body>
<!-- <script src="./src/index.js"></script> -->
<!-- 引用打包好的 JS 文件 -->
<script src="./dist/bundle.js"></script>
</body>
</html> 

在浏览器里再次运行 index.html:

大功告成！