一、简介
webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。
运行过程中，内部构建依赖图，依赖图会映射项目所需的每一个模块，并生成一个或多个包(bundle)
模块：离散的功能块
1、ES2015 import 语句
2、CommonJS require() 语句
3、AMD define 和 require 语句
4、css/sass/less 文件中的 @import 语句。
5、样式(url(...))或 HTML 文件(<img src=...>)中的图片链接
二、入口
入口起点：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值：“./src/index.js”
自定义：通过在 webpack.config.js 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：
module.exports = {
entry: './path/to/my/entry/file.js'
};
module.exports = {
entry: ['./path/to/my/entry/a.js','./path/to/my/entry/b.js']
}; //出口文件默认是 main.js
module.exports = {
entry: {
d: "./src/a.js",
b: './src/b.js'
},
}
出口文件 ./src/a.js=>d.js; ./src/b.js=>b.js;
应用场景是：代码分割,分离 应用程序 和 第三方库(UI库,JS框架基础库)入口
三、输出(output)
输出：告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件.
默认值：主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
注意，即使可以存在多个 entry 起点，但只指定一个 output 配置
自定义：
const path = require('path'); //Node.js 核心模块，用于操作文件路径
module.exports = { // __dirname 当前文件所在目录的完整目录名
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
四、载入器(loader)
功能：webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件(css,jsx,image等等)，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
属性：
test：用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use：表示进行转换时，应该使用哪个 loader。
有三种使用 loader 的方式：
在你的应用程序中，
配置（推荐）：在 webpack.config.js 文件中指定 loader。
内联：在每个 import 语句中显式指定 loader。
CLI：在 shell 命令中指定它们
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
webpack在碰到「在 require()/import 语句中被解析为 '.txt' 的路径时，打包之前，先 使用 raw-loader 转换一下
在 webpack 配置中定义 rules 时，要定义在 module.rules 而不是 rules 中。为了使你受益于此，如果没有按照正确方式去做，webpack 会给出警告
使用正则表达式匹配文件时，你不要为它添加引号。也就是说，/.txt/' "/.txt$/" 不一样。前者指示 webpack 匹配任何以 .txt 结尾的文件，后者指示 webpack 匹配具有绝对路径 '.txt' 的单个文件; 这可能不符合你的意图。
五、插件(plugin)
功能：用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
使用：你只需要 require() 它，然后把它添加到 plugins 数组中，多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.ProgressPlugin(),//显示打包进程
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
//html-webpack-plugin 为应用程序生成 HTML 一个文件，并自动注入所有生成的 bundle。
六、模式(mode)
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
module.exports = {
mode: 'production'
};
CLI 参数中传递：
webpack --mode=production
注：如果要根据 webpack.config.js 中的 mode 变量更改打包行为，则必须将配置导出为一个函数，而不是导出为一个对象：
七、浏览器兼容性(browser compatibility)
webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。
https://webpack.docschina.org/guides/shimming/#%E5%8A%A0%E8%BD%BD-polyfill
八、配置
webpack 配置是标准的 Node.js CommonJS 模块，你可以做到以下事情：
通过 require(...) 导入其他文件
通过 require(...) 使用 npm 的工具函数
使用 JavaScript 控制流表达式，例如 ?: 操作符
对常用值使用常量或变量
编写和执行函数，来生成部分配置
网友评论