webpack 从零开始配置 Vue 开发环境（基础）

前言

如果您对 webpack 有一定的了解，那么您可能并不是本片文章的目标人群。这篇文章是本人学习 webpack 的一个小结，主要是面向 webpack 萌新的。不过也非常欢迎 老司机 提出不同的观点，指出文章的错误 。

由于本篇文章主要是面向初学者，为了便于理解和学习，本篇文章并不会涉及到与性能优化相关的内容（如tree-shaking、split-chunk 等）。

---

基本配置

推荐使用 yarn 代替 npm 作为包管理工具。yarn 与 npm 的比较可以参考 《npm和yarn的区别，我们该如何选择?》 这篇文章。

1. 新建工作目录，文件夹名称随意。
2. 进入工作目录，执行 yarn init -y 生成 package.json 文件。

参考代码

mkdir webpack-test & cd webpack-test/
yarn init -y

---

核心概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：

1. Entry（入口）

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

在 webpack 配置中有多种方式定义 entry 属性：

• 单个入口（简写）语法：
  用法：entry: string|Array<string>
  example：

  entry: './src/index.js'    // string
  etnry: ['./src/foo.js', './src/bar.js']     // Array<string>
  

  entry 属性的单个入口语法 (entry: './src/index.js)，是下面的简写:

  entry: {
       
    main: './src/index.js'
  }
  

• 对象语法
  用法：entry: {[entryChunkName: string]: string|Array<string>}
  example:

  entry: {
       
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
  

2. Output（出口）

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。
在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

• filename 用于输出文件的文件名。
• 目标输出目录 path 的绝对路径。
  example:

  output: {
       
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
  

如果 entry 配置了多个 chunk ，则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。
example:

{
   
  entry: {
   
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
   
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

3. Loader

默认情况下，webpack 只能处理 JavaScript 和 json 文件，loader 让 webpack 能够去处理那些非 JavaScript 文件。可以将 loader 看作是模块转换器，loader 可以将相应的文件处理成 webpack 能够处理的有效模块。

在 webpack 中配置 loader 需要指定两个属性:
1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。
example:

module: {
   
  rules: [
    {
    test: /\.txt$/, use: 'raw-loader' }
  ]
}

上面的代码，等于是告诉 webpack：

“嘿，webpack 编译器&