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）