前端追梦人Webpack教程

1. Webpack简单介绍和HelloWorld

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

1.1 主要概念

1.1.1 入口Entry

告诉webpack从哪里作为分析依赖的入口, 可以提供一个或者多个入口

1.1.2 出口output

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

1.1.3 loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
webpack依靠loader的能力将将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块

1.1.4 plugins

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，打包优化, 压缩, 重新定义环境中的变量等。

1.1.5 mode

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

1.1.6 一个入门级的webpack配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

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

2. 概念深入

2.1 入口Entry深究

上面的entry配置是下面的简写

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

entry: ['./src/index.js', './src/index2.js']

我们也可以使用对象语法

 entry: {
    index: './src/index.js',
    index2:'./src/index2.js'
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename:'[name]-bundle.js'
},

这种配置方式虽然繁琐，但是方便扩展（webpack-merge）

2.1.1 分离 应用程序(app) 和 第三方库(vendor) 入口

v4之前使用CommonsChunkPlugin

entry: {
    //业务代码
    bundle: path.resolve(__dirname, 'src/main.jsx'), 
    //第三方库
    vendor: ["react","react-dom","react-router","@fdaciuk/ajax"]
},

plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
]

v4之后废弃了CommonsChunkPlugin插件，使用optimization-splitChunks来进行公共代码分离

optimization: {
    splitChunks: {
      chunks: "async",
      minSize: 30000,
      minChunks: 1,
      name: true,
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  },

2.1.2 多页面应用程序

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

const Config = {
  mode: "production",
  entry: {
    pageOne: './src/pageOne.js',
    pageTwo: './src/pageTwo.js',
    pageThree: './src/pageThree.js'
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: "raw-loader",
      },
    ],
  },
  plugins: [],
  optimization: {
    splitChunks: {
      chunks: "async",
      minSize: 30000,
      minChunks: 1,
      name: true,
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  },
};

for(const entry of Object.keys(Config.entry)) {
  Config.plugins.push(new HtmlWebpackPlugin({
    filename: `${entry}.html`,
    template: './public/index.html',
    chunks: [`${entry}`, 'venders']
  }))
}

module.exports = Config;

2.2 output深究

只可以指定一个输出配置, output要求必须是一个对象，至少包含path和filename
多入口或者使用了公共代码分离为了确保输出文件具有不同的名字可以使用占位符来实现

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

output常用的配置项

• path输出文件的目录
• filename输出文件的名称，可以使用固定名称, 还可以使用占位符[name], chunkhash
• publicPath: html页面加载资源的公共基础路径(也可以在代码中动态指定__webpack_public_path__ = myRuntimePublicPath
  )
• library 导出库(exported library)的名称
• libraryTarget 导出库的格式

libraryTarget: "umd", // 通用模块定义
libraryTarget: "umd2", // 通用模块定义
libraryTarget: "commonjs2", // exported with module.exports
libraryTarget: "commonjs-module", // 使用 module.exports 导出
libraryTarget: "commonjs", // 作为 exports 的属性导出
libraryTarget: "amd", // 使用 AMD 定义方法来定义
libraryTarget: "this", // 在 this 上设置属性
libraryTarget: "var", // 变量定义于根作用域下
libraryTarget: "assign", // 盲分配(blind assignment)
libraryTarget: "window", // 在 window 对象上设置属性
libraryTarget: "global", // property set to global object
libraryTarget: "jsonp", // jsonp wrapper

• chunkFIleName chunkFilename用来打包require.ensure方法中引入的模块,如果该方法中没有引入任何模块则不会生成任何chunk块文件

    chunkFilename:'js/[chunkhash:8].chunk.js'

2.3 mode模式说明

2.4 loader深入

2.4.1 常用loader

• css-loader和style-loader
  webpack是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系！！！
  因为像 .css 这样的文件不是一个 JavaScript 模块，你需要配置 webpack 使用 css-loader 或者 style-loader 去合理地处理它们。
  如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出
  css-loader会处理 import / require（） @import / url 引入的内容。
  
  但是这并不是我们想要的，因为是个数组，页面是无法直接使用，这时我们需要用到零外一个style-loader来处理。
  style-loader 是通过一个JS脚本创建一个style标签，里面包含一些样式。style-loader是不能单独使用的，应为它并不负责解析 css 之前的依赖关系，每个loader的功能都是单一的，各自拆分独立。
• babel-loader 用来处理ES6语法转化成ES5语法
• raw-loader加载文件原始内容，如加载txt文件
• file-loader和url-loader将文件发送到输出文件夹，并返回（相对）的URL
• json-loader加载json文件
• ts-loader加载typescript文件
• html-loader加载html文件
• jade-loader加载jade文件
• less-loader加载less样式文件
• sass-loader加载sass样式文件
• eslint-loader使用eslint清理daima
• vue-loader加载vue文件

2.4.2 loader特性

loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。

2.5 插件深入

插件的目的就是用来解决loader解决不了的事情
常用的插件

• CommonsChunkPlugin分离公共的依赖包, 减小业务chunk大小
• CompressionWebpackPlugin 提供带 Content-Encoding 编码的压缩版的资源(如启用gzip压缩的资源)
• copy-webpack-plugin用来在打包过程中拷贝静态资源(如static目录中的图片，字体等资源)
• DefinePlugin允许创建一个在编译时可以配置的全局常量如process.env.NODE_ENV来区分开发和生产环境
• DllPlugin也是一种分包方法, 结合DLLReferencePlugin 实现了拆分 bundles，同时还大大提升了构建的速度。
• ExtractTextWebpackPlugin从bundle中分离文件内容到单独的文件中, 常用来提取css到外部单独的样式文件中而不是作为style标签插入到html中, 在新版本已使用mini-css-extract-plugin插件替代
• HtmlWebpackPlugin自动生成一个HTML页面，自动插入bundle, 可以使用模板
• PrefetchPlugin实现文件的预加载，提升加载速度
• SourceMapDevToolPlugin生成source-map
• UglifyjsWebpackPlugin用来压缩混淆js

3. 模块热替换(Hot Module Replacement)

模块热替换就是在应用程序运行过程中能够动态替换，添加或者删除模块而不加载整个页面
整体模块热替换流程如下

1. 应用程序代码要求 HMR runtime 检查更新。
2. HMR runtime（异步）下载更新，然后通知应用程序代码。
3. 应用程序代码要求 HMR runtime 应用更新。
4. HMR runtime（同步）应用更新。

devServer的简单配置

devServer: {
    hot: true,
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    watchOptions: {
      poll: true
    }
  }

启动webpack-dev-server来进行开发, 在package.json中进行添加

 "scripts": {
    "serve": "webpack serve",
    "build": "webpack"
  },

4. webpack模块解析

webpack使用resolver库来解析模块的路径为其绝对路径
webpack能够解析:

1. 绝对路径

import "/home/me/file";

import "C:\\Users\\me\\file";

在这种情况下不需要进一步解析就可以取得文件了
2. 相对路径

import "../src/file1";
import "./file2";

在这种情况下，使用 import 或 require 的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在 import/require 中给定的相对路径，会添加此上下文路径(context path)，以产生模块的绝对路径(absolute path)。
3. 模块路径

import "module";
import "module/lib/file";

模块将在 resolve.modules 中指定的所有目录内搜索。 你可以替换初始模块路径，此替换路径通过使用 resolve.alias 配置选项来创建一个别名。

一旦根据上述规则解析路径后，解析器(resolver)将检查路径是否指向文件或目录。如果路径指向一个文件：

如果路径具有文件扩展名，则被直接将文件打包。
否则，将使用 [resolve.extensions] 选项作为文件扩展名来解析，此选项告诉解析器在解析中能够接受哪些扩展名（例如 .js, .jsx）。
如果路径指向一个文件夹，则采取以下步骤找到具有正确扩展名的正确文件：

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

5. 构建目标

通过制定target选项可以使得webpack打包针对不同运行环境的包
常用值为node和web
使用node的话就可以通过commonjs的require来进行模块加载了
web的话就是在浏览器环境中可用， 默认值

6. resolve

resolve配置项可以用来配置webpack模块如何被解析,

• alias别名配置， 简化路径编写

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

• extensions自动解析确定的扩展
  默认值为

extensions: [".js", ".json"]

能够使用户在引入模块时不带扩展：

• mainFiles解析目录时候使用的文件名（import, require时候默认找的文件）

7. devtool

此选项控制是否生成，以及如何生成 source map。
可以指定的source map构建类型

8. externals

通过该配置项可以外置化一些依赖

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
如利用CDN资源加速页面加载性能

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

externals: {
  jquery: 'jQuery'
}

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：

import $ from 'jquery';

$('.my-element').animate(...);

又如外置化lodash

externals : {
  lodash : {
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // 指向全局变量 , 如用script标签直接引入时是通过全局变量_来进行引用的
  }
}