Webpack 学习记录之概念

1 什么是webpack

webpack是一个模块打包器，可以递归的构建一个依赖关系图，其中包含每个程序需要的每个模块，然后将所有模块打包成一个或多个bundle。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。

bundle:bundle即由webpack打包出来的文件。

依赖关系：一个文件依赖于另一个文件，webpack就把这种关系视为依赖关系。所以webpack可以接受非代码资源，并把它们当做依赖提供给应用程序。

2 主要概念

入口：entry指示webpack使用哪个文件作为构建依赖图的开始。

出口： output指示webpack将打包好的bundles，如何命名以及输出到哪里。

loader:loader可以让webpack如处理那些非JS文件，将起转化为模块（webpack只理解JS）

插件：plugins可以打包优化和压缩等处理各种各样的任务。

模式：mode设置为开发还是生产环境

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
  const webpack = require('webpack'); // 用于访问内置插件

  module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'my-first-webpack.bundle.js'
   },
   module: {
     rules: [
       { test: /\.txt$/, use: 'raw-loader' }
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({template: './src/index.html'})
   ],
   mode:'production' || 'development'
 };

3 详细示例

3.1 入口 entry

module.exports = {
    // 单个入口
    entry: './path/to/my/entry/file.js'

    // 为单个入口文件赋值名字
    entry: {
       main: './path/to/my/entry/file.js'
    }

    // 多文件多入口，一般用于分离 应用程序(app) 和 第三方库(vendor) 入口
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
     }
}

3.2 输出 output

即使有多个入口文件，也只能规定一个输出配置

module.exports = {
  // 最低要求,filename和path
  output:{
    filename:'bundle.js',
    path: '/home/proj/public/assets'
  }

  // 如果有多个入口文件，即生成多个单独的"chunk"，则要使用占位符来确保每个文件具有唯一的名字
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }

}

3.3 模式 mode

module.exports = {
  mode: 'production' //生产
  mode: 'development' //开发
};

3.4 loader

由于webpack无法处理除了JS以外的文件，所以loader发挥了重要的作用。

loader用于对模块的源代码进行转换，即将不同的语言转化为js，或将内联图转化为 data URL,也允许你直接在JS中import css文件，并且在bundle中引入这些依赖。

// npm install --save-dev css-loader
// npm install --save-dev ts-loader

//在webpack.config.js中配置
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

// 使用内联方式配置
import Styles from 'style-loader!css-loader?modules!./styles.css';

// 通过 CLI 使用
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

3.5 插件 plugins

webpack 插件是一个具有 apply属性的 JavaScript 对象，用来解决loader无法实现的其他事。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件

module.exports = {
  ....
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

4 概念补充

4.1模块 module

在模块化编程中，开发者将程序分解成离散功能块，并称之为模块。

模块以各种方式表达他们的依赖关系：

• es2015 import 语句
• commonjs require() 语句
• AMD define 和 require 语句
• css/sass/less文件中的 @import 语句
• 样式url(...)或HTML文件<img src=.../>中的图片链接

4.2 模块解析 module resolution

resolver是一个库，用于帮助找到模块的绝对路径。当打包模块时，webpack使用enhanced-resolve来解析文件路径。

webpack中的解析规则：

// 已经取得文件的绝对路径，不需要在做解析
import "C:\\Users\\me\\file";

// 在import/require给定的相对路径，添加上下文路径，转化为绝对路径
import "../src/file1";

// 模块路径
//（1）指定目录，如果目录具有扩展名，直接打包；如果没有，查看resolve.extensions 的值，看看接受那些扩展名，如.js,.jsx
import "module";

//（2）指向文件夹
/*a.如果文件夹中包含 package.json 文件，则按照顺序查找 resolve.mainFields 配置选项中指定的字段。
并且 package.json 中的第一个这样的字段确定文件路径。
b.如果 package.json 文件不存在或者 package.json 文件中的 main 字段没有返回一个有效路径，则按照顺序查找 resolve.mainFiles 配置选项中指定的文件名，看是否能在 import/require 目录下匹配到一个存在的文件名。
c.文件扩展名通过 resolve.extensions 选项采用类似的方法进行解析。*/
import "module/lib/file";

4.3 Runtime 与 Manifest

在使用webpack构建的应用程序或站点中，有三种主要的代码类型：

（1）你或你的团队编写的代码；

（2）你的源码会依赖的任何第三方的 library 或 vendor 代码；

（3）webpack 的 runtime 和 mainfest，管理所有模块的交互。

当打包之后，应用程序的目录结构不复存在，webpack通过runtime与manifest管理各个模块之间的联系与交互。

manifest保留着所有模块的详细要点（比如依赖于哪个模块）,将import或require语句都转化为__webpack_require__方法，指向模块标识符。

runtime根据manifest，查询模块标识符，实现模块的加载和逻辑解析。

4.4 模块热替换 hot module replacement

模块热替换会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面，主要通过以下方式来加快开发速度：

（1）保留在完全重新加载页面时丢失的应用程序状态；

（2）只更新变更的内容；

（3）像在浏览器调试器中更改样式一样快。

---

待理解之后补充：

（1）模块路径指向文件夹的查找方式；

（2）为何在使用缓存时，有些表面上的内容没有修改，计算出的哈希还是会改变。（文中原因：：runtime和manifest的注入在每次构建都会发生变化）；

（3）模块热替换的原理。