从 iOS 到大前端（1）- Webpack 入门

webpack 是什么？

官方文档里的定义：

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

为什么需要 Webpack?

现在的网页可看做是功能丰富的应用，它们包含大量的 JavaScript 代码和一些开源的依赖包，如何管理这些文件也是一个问题。有了 JavaScript 模块化编程，我们可以把复杂的程序细化为小的文件，WebPack 帮助我们管理这些文件的依赖关系，把各种模块打包合并成一个文件输出给浏览器。在打包的过程中还会对资源做一些处理，比如把 Typescript 编译成 JavaScript、sass 编译成 css 等。

使用 Webpack

WebPack 有四个核心概念：

入口 (entry)
输出 (output)
Loader
插件 (plugins)

下面结合 Vue 项目模板介绍 Webpack 基本的使用方法

1. 准备工作

按照 Vue 教程创建一个新项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

进入项目的 build 目录，这里有三个文件用于设置 WebPack:

webpack.base.conf.js
webpack.dev.conf.js
webpack.prod.conf.js

看名字就能猜到它们使用环境：webpack.dev.conf.js 保存的是开发环境的配置，webpack.prod.conf.js 是生成环境的配置，webpack.base.conf.js 是这两个环境公用的配置。

webpack.base.conf.js 文件不到 100 行，主要内容在 module.exports = { } 中:

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {   
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

2. 入口 (entry)

定义在 webpack.base.conf.js 中：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },

这里指定 ./src/main.js 为入口文件，Webpack 已这文件为起点，找出它依赖的模块，处理每个依赖项，然后输出到 bundle 文件中。单页应用指定一个入口就可以了，多页应用需要指定多个入口，具体语法参考文档入口起点

3. 出口

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。webpack.base.conf.js 中的出口定义：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {   
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  xxx

filename 和 path 属性，用来告诉 webpack bundle 的名称，以及我们想要生成(emit)到哪里。
config.build.assetsRoot 这个属性定义在 ./config/index.js 文件中，

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

实际值是 ../dist/index.html, 运行 npm run build 后会在生成 dist 目录和 index.html 文件。
注意到 filename 的名称不是固定的，使用了 [name] 占位符，webpack 编译后 name 会被替换为该模块的名称，类似的，还可以使用其它占位符作为 filename，如 [hash]、[chunkhash]、[id]、[query] 等，它们的含义在 output-filename 文档中有详细介绍。

publicPath 项指定在浏览器中所引用的「此输出目录对应的公开 URL」。这里通过判断 process.env.NODE_ENV 的值来区分开发和生成环境。和 config.build.assetsRoot 类似，config.build.assetsPublicPath 和 config.dev.assetsPublicPath 都是定义在 ./config/index.js 文件中，它们的值都是 /。 process.env.NODE_ENV 有时定义在哪里呢？process.env 是 Node 的环境变量，这篇文章中有介绍。这里的 process.env.NODE_ENV 定义在config目录下，dev.env.js、prod.env.js、test.env.js 三个文件中都有定义，分别对应开发、生成、和测试环境。

4. loader

Webpack 自身只理解 JavaScript，通常项目还会包含 CSS、图片、文本等其它资源，loader 可以将这些文件转换为 webpack 能够处理的有效模块，然后你就可以利用 Webpack 的打包能力，对它们进行处理。loader 的配置在 module.rules 属性里，以第一个 loader 配置为例:

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
}

test: 识别需要转换的文件，这个正则表示 ".vue" 后缀类型文件
loader: 设置 loader 名称，常用的 loader 可以在这里查询
options: 可以是字符串或者对象，它的值会被传递到 loader 中，需要参考各 loader 的使用文档，这里

这个配置告诉 Webpack，遇到 require 或者 import .vue 类型文件时，先交给 vue-loader 转换一下，然后再对它打包。

5. Plugins

插件可以处理多种类型的任务，从打包优化和压缩，一直到重新定义环境中的变量。插件的使用方法也很简单，首先 require，然后 new 一个实例放到 plugins 数组中。Vue 模板项目中的插件配置分别在 webpack.dev.conf.js 和 webpack.prod.conf.js 两个文件中，以 webpack.dev.conf.js 中配置为例：

  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

从上到下依次为：

DefinePlugin: 通过配置了 DefinePlugin，这里面的标识 (process.env) 就相当于全局变量，业务代码可以直接使用配置的标识。
HotModuleReplacementPlugin: 模块热替换插件，在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面，加快开发速度。
NoEmitOnErrorsPlugin: 跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
HtmlWebpackPlugin: 根据你提供的 html 模板生成 html。
CopyWebpackPlugin: 拷贝静态资源到指定目录

6. 其它配置项目

注意到 webpack.base.conf.js 文件中，在 output 属性下面，还有个 resolve 属性，它有什么作用呢？

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

我们在项目中 import 的模块有的是自己定义的，有的是第三方的库，resolver 帮助 webpack 找到这些模块的绝对路径。

alias: 上述配置中定义了两个别名， vue 指向 node_modules 下的 vue/dist/vue.esm.js 文件，在使用的时候直接 import Vue from 'vue'，webpack 就能够找到该文件了。@ 指向了 src 目录，引用 src 目录下的模块可以这样写 import HelloWorld from '@/components/HelloWorld'。
extensions: 在 import 模块时不带扩展名，webpack 依然可找到对应的文件，具体哪些文件可以不带呢？就是在这里定义的。extensions 数组有 .js、.vue、.json，所以我们引用这些文件时就可以不加扩展名了。

总结

对于刚接触前端项目的新人，了解 Webpack 的基本配置很重要。这里只是简单介绍了 webpack 最基本的功能，还有如 devserver 等其它常用配置就留给你去探索吧。官方文档真的很全，各种属性的使用方法都有详细的介绍，一定不要浪费这么好的资源。

参考链接

webpack 官方文档