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

参考文档

• [ Webpack Docs ] 安装
• [ Webpack Docs ] 起步
• [ Webpack Docs ] 命令行接口