Webpack修炼日志——入门

webpack快速入门

webpack 官方的解释如下：

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

webpack是一个现代JS应用程序的静态的绑定工具。其工作原理是构建项目各模块依赖关系的映射图，并生成一个或者多个包。

在开始之前，我们先动手安装。

安装

npm install webpack webpack-cli -g
webpack --v
webpack --help
复制代码

此时，如果可以看到版本和命令帮助提示，则说明已经成功安装。

初始化一个webpack的项目

# 首先确保有一个package.json的配置文件
npm init
# 安装webpack，并使之在开发时被使用到
npm install webpack webpack-cli -D
复制代码

当完成webpack的配置安装后，package.json文件中的devDependencies项中会有以下内容

    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
复制代码

此时说明 webpack和webpack-cli 已经配置到项目中。 我们再回到项目中建立一个src目录，并随便建立一个js文件，保存，在（项目目录）命令行中执行

webpack --mode production

webpack会开始编译，最后生成一个dist目录

为了方便，我们在package.json编写一个脚本项

    "scripts":{
        "build":"webpack --mode production"
    }
复制代码

保存。 在项目中建立一个src目录，index.js文件，保存，在（项目目录）命令行中执行

npm run build

然后会达成上述一样到效果。

核心概念

入口 Entry

原文

An entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

入口端：指出哪个模块可以让webpack开始构建内部依赖图，webpack将确定除了这个入口之外的模块和库之间的直接或间接的依赖关系。

这就好比我们的项目有10个引用的类库，然后这10个类库又必须依赖500个基础类库，还有几百个CSS的样式依赖。犹如一团乱麻的线，你只需要告诉webpack，线头在哪里。剩下的工作就交给webpack把这个苦活脏活干完。

而这个“线头”，就是项目已开始启动的那个.js文件。在上述的案例项目中，就是src/index.js 文件。webpack的默认入口文件，就是项目目录下src/index.js。但是你也可以自己指定给它一个入口文件。这样的话，就需要你在webpack的配置文件中设置。// 详见配置方法

输出 Output

The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

对应输入，输出(output)则是让webpack将输入的“线头”（即入口程序），整理完成之后，输出到哪个位置上。默认是项目目录下 ./dist/main.js ，相关的其他文件，例如CSS、图片等，则都放在 ./dist 目录下

同样的，你也可以通过配置文件中的output项，来定义不同的输出路径。

加载器 Loaders

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

开箱即用，webpack（原生）仅能够理解JS和JSON文件，对于其他类型的文件则需要通过类似于插件的方式（注意，webpack还有一个插件概念，虽然概念有点类似，但是作用不同）才能让webpack能够实现读取，并且转换为有效的模块，然后添加到依赖图中。

比方说样式表.css文件，需要css-loader来处理。再比方说加载图片.jpg，则需要url-loader来处理。

在使用loader时，有两个比较关键的属性用于配置。

1. test属性，圈定哪些文件将被转换。可以是文件名，或者用于匹配文件名的正则表达式。
2. use属性，指出使用什么名字的加载器(loader)用于进行转换。

webpack.config.js

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
复制代码

上面的案例，定义了rules(规则)属性(test和use在是其属性下的子属性)，含义是：所有的txt文件，用raw-loader加载器进行转换。

插件 Plugins

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

In order to use a plugin, you need to require() it and add it to the plugins array. Most plugins are customizable through options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with the new operator.

Loader相比较Plugin而言，功能较为单一。插件可以做的则更多，例如优化、包管理和环境变量注入。要使用插件，则需要用require()方法添加到插件数组中。大多数插件可以通过配置项来实现定制。因为同一款插件可以用在不同的地方实现不同的需求，所以插件的使用需要用new来进行实例化。

目前流行的插件如：

• webpack 仪表板
• webpack捆绑分析器
• 热模块替换
• ……

Mode 模式

By setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.

通过mode参数，将项目设置为开发、生产、测试等模式，可以对应启动不同环境下的配置。默认是生产模式(production)

浏览器兼容性

webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). webpack needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.

webpack支持所有符合ES5标准的浏览器。（不支持IE8（含）以下版本的浏览器）。webpack需要用到 Promise，用来import()方法和require.ensure()方法。如果是老的浏览器，则需要在使用这些表达之前加载polyfill。

配置文件

webpack是根据开发者定义的配置文件进行定义的。虽然把配置文件放在这里介绍，可能对于初学者来说有点“为时过早”。但是如果一点都不讲，而直接将后续都概念，则又有一些“空中楼阁”。权衡之下，还是先讲一讲。如果遇到一些模糊都概念，可以暂时放下执着，继续往后看，思路会变得越来越清晰。

webpack都配置文件是一个js程序文件，而这个程序文件则是输出了webpack工作都所需都所有配置项。这样做的好处是比纯粹静态的文件（如JSON）更灵活。如果没有在配置文件中设置，webpack则会采用默认配置替代。

配置文件默认放在项目下，文件名为 webpack.config.js。它是一个标准的Node.js的CommonJS模块。所以，它支持：

• 通过 require(...) 来导入其他的程序文件（模块）
• 通过 require(...) 使用npm安装的组件
• 所有JS的语法和逻辑
• 可以定义常量和变量
• 可以通过执行一些方法来生成配置文件中的部分配置项。例如可以根据不同的系统环境来指定访问的端口号（这个常用于实际开发中）

官方还建议，应该避免如下操作

• 不要用命令行方式，直接输入参数
• 留意不要将多个配置项的输出值指向同一个文件
• 将一个配置文件写的太长，或者将一个大型项目的所有配置写在一个文件中。应该将其分模块化。

实际操作

接下来动手配置一个最最简单的例子。作为一个全栈工程师，最简单的后端就是express了，我们先创建一个express的初始化网站（项目）。在此之前，你要先确保你已经安装了express脚手架。

npm i express-generator -g

express init
npm -i
复制代码

此时，一个空的express网站（默认是pug + jade）已经生成。在项目的根目录下，编辑一个webpack的配置文件 webpack.config.js

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './public/javascripts'),
    filename: 'index.bundle.js'
  }
}
复制代码

然后在项目下创建一个src目录和一个index.js文件，编辑这个程序文件，往控制台输出一个hello world。这个文件就是我们项目的入口文件。上述的配置文件，将输出放在了/public/javascripts下的index.bundle.js。所以，我们需要在layout.jade中引入这个js文件。

├── LICENSE
├── app.js
├── bin
│   └── www
├── package-lock.json
├── package.json
├── public
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
├── src
│   └── index.js
├── views
│   ├── error.jade
│   ├── index.jade
│   └── layout.jade
└── webpack.config.js
复制代码

在项目目录中，运行webpack，看看是否有配置方面的问题。如果一切正常的化，差不多应该是这样的画面。

Hash: 69ed659021aa3734df11
Version: webpack 4.26.0
Time: 72ms
Built at: 2018-11-20 16:16:09
          Asset      Size  Chunks             Chunk Names
index.bundle.js  3.82 KiB    main  [emitted]  main
Entrypoint main = index.bundle.js
[./src/index.js] 54 bytes {main} [built]
复制代码

说明，webpack已经开始工作，并且将我们的js源文件转换后放到了public的javascripts目录下了。好了，打开网页看看。（默认，express用的是localhost:3000）