Webpack是一种前端资源构建工具，是一个静态模块打包器(module bundler)
在Webpack看来，前端的所有资源文件,都会被作为模块处理
它将根据模块依赖的关系进行静态分析，打包生成对应的静态资源。
- 入口(entry)
入口起点指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
- 输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
const path = require(‘path’);
代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径
filename
作用：输出的HTML文件名，默认为index.html，可以直接配置带有子目录
filename是相对于output.path的，而在webpack-dev-server中，则是相对于webpack-dev-server配置 的publicPath
- output.publicPath
默认值: 空字符串
官方解释：
webpack提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个基础路径，它被称为公共路径（publicPath）
这里所说的资源的基数路径是指项目中引用的css、js、img等资源的一个基础路径，这个基础路径要配合具体资源中指定的路径使用，所以其实打包后的资源的访问路径可以用如下公式表示
静态资源最终访问路径 = out.publicPath + 资源loader或插件等配置路径
output.publicPath = ‘/dist/‘// image
options: {
name: ‘img/[name].[ext]?[hash]’
}
最终图片的访问路径为 output.publicPath + ‘img/[name].[ext]?[hash]’ = ‘/dist/img/[name].[ext]?[hash]’
output.filename output: { filename: ‘[name].js’ }
最终js的访问路径为 output.publicPath + ‘[name].js’ = ‘/dist/[name].js’// extract-text-webpack-plugin
css new ExtractTextPlugin({
filename: ‘style.[chunkhash].css’
})
最终css的访问路径为 output.publicPath + ‘style.[chunkhash].css’ = ‘/dist/style.[chunkhash].css’
一般情况下publicPath应该以’/‘结尾，而其它loader或插件的配置不要以’/‘开头
https://juejin.cn/post/6844903601060446221
- loader
可以理解为一个翻译官 (将浏览器不认识的翻译为浏览器所认识的)
webpack 只能理解 JavaScript 和 JSON 文件
loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
在 webpack 的配置中，loader 有两个属性：
(一) test 属性，识别出哪些文件会被转换。
(二) use 属性，定义出在进行转换时，应该使用哪个 loader。
- 插件(plugin)
引入一些项目中本身没有，但是确又需要的功能的相关插件
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
包括：打包优化，资源管理，注入环境变量。
使用步骤：
引入：require()它；
把它添加到plugins数组中；
通过选项(option)自定义/使用new操作符来创建一个插件实例。
- 模式(mode)
三种环境 development、production、none
webpack内置环境默认值为 production
- 浏览器兼容性(browser compatibility)
webpack支持所有符合ES5标准的浏览器
webpack的inport（）和require.ensure（）需要Promise，如果想要支持旧版的浏览器
在使用这些表达式之前，还需要提前加载polfill。
@babel/preset-env 会根据目标环境来进行编译和打补丁。 具体是target属性
@babel/plugin-transform-runtime 是对 Babel 编译过程中产生的 helper 方法进行重新利用(聚合)，以达到减 少打包体积的目的。此外还有个作用是为了避免全局补丁污染，对打包过的 bunler 提供”沙箱”式的补丁。
@babel/polyfill 通过定制 polyfill 和 regenerator，提供了一个ES2015+ 环境 polyfill的库。
- 配置(Configuration)
webpack遵循CommonJS模块规范
模块(Modules)
在模块化编程中，开发者将程序分解为离散的chunk，并称之为模块
webpack支持的模块类型
ECMAScript模块
CommonJS模块
AMD模块
Assets
WebAssembly模块
loader
loader可以使webpack支持多种语言和预处理语法编写的模块。loader向webpack描述了如何处理非原生模块，并将依赖引入到你的bundles中。
模块解析
resolver是一个帮助寻找模块绝对路径的库，一个模块可以作为另一个模块的依赖模块，然后被后者引用
resolver帮助webpack每个require/import语句中，找到需要引入到bundle中的模块代码
webpack能解析三种文件路径
绝对路径、相对路径、模块路径
模块路径
在resolve.modules中指定的所有目录检索模块，可以通过配置别名的方式来替换初始模块路径
- target
设置webpack的环境
由于JavaScript既可以编写服务端代码也可以编写浏览器代码，webpack提供了多种部署target
设置target属性，需要在webpack设置中设置target字段
多target
通过设置两个独立配置，来构建对library进行同构
- mainfest
简单理解：打包后，webpack管理所有模块之间的交互
当compiler开始执行、解析和映射应用程序时，它会保留所有模块的详细要点，这个数据集合称为”manifest”
当完成打包并发送到浏览器时，runtime会通过manifest来解析加载模块
通过使用manifest中的数据，runtime将能够检索这些标识符，找出每个标识符背后对应的模块。
- 模块热替换(HMR)
模块热替换功能会在应用程序运行过程中，替换、添加或删除模块，而无需加载整个页面。
- chunck
chunck两种形式：
initial(初始化)是入口起点的main chunk。此chunk包含为入口起点指定的所有模块及其依赖项。
每个chunk都有对应的asset(资源)。资源，是指输出文件(即打包结果)。
运行指令：
webpack组成部分的核心五大块：
entry、output、module、plugins、mode
开发环境：webpack ./src/index.js -o ./build/built.js —mode=development
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到./build/built.js,且打包的环境是开发环境
// resolve用来拼接绝对路径的方法
const { resolve } = require(‘path’);
// dirname node.js变量，代表当前文件的绝对路径
path: resolve(dirname,’build’);
常用的loader
css-loader、style-loader、less-loader、sass-loader、html-loader(common.js)、url-loader(url-loader)
关闭 ES6模块化，使用common.js解析（url-loader）
esModule：false
给图片进行重命名
//[hash:10] 取图片hash的前10位
// [ext]取文件原来的扩展名
name: ‘[hash:10].[ext]’
file-loader: 打包其它资源(除了html/js/css资源以外的资源)
exclude: /.(css|js|htm|less)$/
开发服务器 devServer 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
特点: 只会在内存中编译打包，不会有任何输出
webpack-dev-server
devServer: {
// 项目构建后路径
contentBase:resolve(__dirname,’build’),
// 启动gzip压缩
compress：true，
// 端口号
port：3000，
// 自动打开浏览器
open：true
}
若有收获，就点个赞吧
0 人点赞
