webpack-简介

一、简介
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$ /' "/.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 控制流表达式，例如 ?: 操作符
对常用值使用常量或变量
编写和执行函数，来生成部分配置