WebPack（现代 JavaScript 应用程序的 静态模块打包工具）

概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。同时webpack也是优秀的前端构建工具，静态资源打包器，可以根据模块依赖关系进行静态资源分析，快速打包生成相对应浏览器可以直接识别的静态资源！

入口起点(entry point) ：指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。

输出(output)：告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

文件类型读取(loader)：只能读取JavaScript 和 JSON 文件，loader 能够 import 导入任何类型的模块

插件(plugin) ：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

环境模式(mode)：通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production

浏览器兼容性(browser compatibility) ：提前加载 polyfill，不支持 IE8 及以下版本。webpack 的 import() 和 require.ensure() 需要 Promise

环境(environment) ：webpack 5 运行于 Node.js v10.13.0+ 的版本。

流程：

安装webpack环境：

1）项目根目录控制台执行指令：npm init，生成package.json文件，npm是新版本node自带的包管理工具，而package.json相当于清单，记录依赖库和项目信息的文件。

2）全局安装webpack指令： npm i webpack webpack-cli -g ，全局安装是指系统环境中，任何项目文件夹下都可以使用指令，其中mac电脑首次执行应该是需要管理员权限，sudo npm i webpack webpack-cli -g 如果网速太慢则建议切换为淘宝镜像源。

3）本地安装webpcak指令： sudo npm i webpack webpack-cli -D，下载的模块是注入于本项目下的./node_nodules文件夹中，不会影响其他项目，起到独立的作用！
 

概念核心：

Entry入口文件

入口文件指示，配置wepack以哪个入口文件进行打包分析等参数。

module.exports = {
   entry: {   //入口
        suibian: './src/e.js',
        f: './src/f.js',
        myFile: './src/index.js'   //定义多个文件的路径
    },
}

 

Output.出口文件

出口文件指示，配置webpack打包后的资源bundle输出资源的路径及参数。

 output: {   //出口
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:8].js',  //模块标识符的 hash
    },

Plugins.插件

插件（plugins）可以让webpack执行范围更广更为复杂的任务，配置打包优化等一下相关的作用功能，使用前需要单独引入对应的插件。

1）处理html文件插件：
// 无template属性时，默认在输出目录创建一个空的html文件，并将打包后的资源引入其中。template指明文件时，则复制文件，并引入打包后的资源。
new HtmlWebpackPlugin({
  template: "./src/index.html",
  minify: {
    collapseWhitespace: true, // 清除空行缩进
    removeAttributeQuotes: true, // 清除注释
  },
}),
2）抽离CSS成单独文件插件：
// 处理CSS从js文件中抽离生成独立文件
new MiniCssExtractPlugin({
   filename: "static/css/app.css", // 文件输出目录
 }),
3）压缩CSS插件：
// Css压缩插件，需要在package.json中定义sideEffects属性防止它压缩去除掉一些css，less等文件。
new OptimizeCssAssetsWebpackPlugin(),

4）PWA离线访问技术插件：
// PWA离线缓存技术，优化使用体验，网络断开后刷新网页仍能够加载得到已经缓存的资源文件，依靠service Workers技术，插件执行后生成一个servicework配置文件，需要在入口文件中注册，兼容性判断。
new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true, // 帮助servicework快速启动
  skipWaiting: true, // 删除旧版本使用最新的serviceworker技术
}),
5）忽略库并动态引入第三方库插件：
/**
 * dll动态引入单独库
 * 通过manifest.json文件中的映射关系，构建打包时进行忽略打包哪些库，再通过addAssetHtmlWebpackPlugin引入独立打包的库。
 */
new webpack.DllReferencePlugin({
  manifest: resolve(__dirname, "dll/manifest.json"),
}),
new addAssetHtmlWebpackPlugin({
  filepath: resolve(__dirname, "dll/jquery.js"),
}),

Mode.开发环境配置

配置webpack的工作方式，其中有开发（development）和生产（production）模式，开发环境配置简单，能够使代码能够跑在本地即可，生产模式相关复杂，需要处理网站运行上线时的优化等操作。

// mode: "development",
mode: "production", // 设置webpack的工作环境