Webpack 4 构建大型项目实践 / 起步

Webpack 是一个 Javascript 应用程序的 静态模块打包器 ，它会读取 Javascript 文件所需依赖，并把他们打包到一个或多个目标文件。

值得注意的是，Webpack 只能解析 Javascript 文件，处理其他类型文件需要各自的 loader / plugin

安装

准备安装 Webpack 之前请确认你已安装 Nodejs 最新稳定版本，过旧版本可能会缺少 Webpack 需要的包。

yarn global add webpack
复制代码

如果需要在命令行中使用 webpack 命令，webpack 4+ 版本还需要安装 webpack-cli ，如使用时未安装它会提醒你安装。

yarn global add webpack-cli
复制代码

全局使用命令前还需要把 webpack.cmd 所在目录（yarn bin）添加到环境变量，使用 yarn global bin 查看该目录具体路径

命令行打包和配置

• 新建 src.js 文件

  function counter() {
  if (!counter.count) counter.count = 0
    counter.count++
  }
  
  counter()
  
  console.log(counter.count)
  复制代码

• 打包 src.js 并把打包结果写入到同目录下的 dist.js

  webpack src.js -o dist.js --mode="development"
  复制代码

  -o dist.js 指定生成文件的的路径和文件名，它可以拆分为 --output-path="./" --output-filename="dist.js"

  --mode="development" 指定开发环境，打包后的代码不压缩

  事实上像这样单文件的打包 Webpack 并不能做什么神奇的事，我们可以在 dist.js 中看到，打包生成代码由两部分组成： __webpack_require__ 函数和 eval 执行 src.js 源码。

由于实际使用时 webpack 配置比较复杂，在命令行中极难阅读且不能满足所有需求，这里就不再继续展开，后文的重点也将放在如何修改配置文件以应对不同需求，更多命令行配置见参考文档“命令行接口”。

使用配置文件

为 webpack 指定配置文件有两种方式：

1. 用 --config 指定配置文件， webpack --config webpack.config.js
2. 使用 Webpack Node.js API ，在 Node.js 代码中调用 webpack 函数

下方的例子我们使用第一种方式，实际项目中第二种方式会更常见，因为可以自定义打包的信息展示（比如等待动画、日志），后文我也会讲到。

• 新建 webpack.config.js 文件

  const path = require('path')
  
  module.exports = {
    mode: 'development',
    entry: './src.js',
    output: {
      filename: 'dist.js',
      path: path.resolve(__dirname, './')
    }
  }
  复制代码

• 打包 src.js 并把打包结果写入到同目录下的 dist.js

  webpack --config webpack.config.js
  复制代码

  可以看到，打包结果和上方一样。

  Webpack 默认配置文件是当前目录的 webpack.config.js ，所以上面的命令可以简化为 webpack