-- 我们为什么需要 webpack 等打包工具来进行工程化

在实现一个网页项目时我们通常会面临很多 JS、CSS、图片及其他资源文件。如果直接将这些文件交付给浏览器，会产生两个极其痛苦的主要痛点

• 性能瓶颈浏览器需要频繁请求每一个小文件。导致加载速度极慢，严重影响使用者体验。按理说，
• 兼容性障碍浏览器无法识别某些现代语法。如第三方 node_moduleTypeScript 、Less/Sass 等代码，这会导致程序直接报错。

这些问题贯穿了开发与运行的每一个环节。在开发阶段我们希望改动代码后页面能即时刷新，减少反复调试的时间；在运行上线阶段我们希望资源加载越顺畅、体积越小。这正是打包工具的主要价值：它通过对资源进行深度加工。将碎片化的文件合成为最少数量，并编译为浏览器能够完美识别的标准代码。

主要概念 => webpack

webpack

webpack 是一个用于前端开发的静态模块打包工具。它将项目中的各种资源统一视为模块通过分析复杂的依赖关系。将它们打包成调整后的静态文件，从而明显提高开发效率和项目可维护性。

关键组成部分

• 入口 指定打包的起点文件，决定了从哪里开始建立。
• 输出 定义打包后产物的存放方法与文件名。按理说，
• 加载器 文件的“翻译官”。负责将各类非 JS 资源转化成模块。
• 插件 用于执行复杂的自定义任务，极大 webpack 的功能边界。
• 文件别名 配置模块解析行为，让方法引用更简洁、高效。

module.exports = {
// 入口配置
entry这方面，'./src/main.js',// 产物输出方法
再看output，{},// 配置模块解析的具体行为
resolve: {
extensions:,// 自动解析后缀
alias的观点是，{ $xxxx: xxxx } // 配置别名，避免复杂的相对方法
},// 配置插件
plugins:,})
],// 打包输出调整
optimization: {
// 将 js 文件拆分为三种类型以利用浏览器缓存
// . vendor: 第三方库代码
// . common: 业务组件的公共部分
// . entry: 每个页面独有的业务代码
// 区分改动频率不同的代码，解决缓存失效频繁的问题
splitChunks: {
chunks的观点是。'all',// 对所有模板进行分割
maxAsyncRequests:,maxInitialRequests:,cacheGroups: {
至于vendor，{
// 第三方依赖库
至于test，/node_modules/,name: "vendor",priority:,enforce: true,reuseExistingChunk: true,},common: {
// 公共模块
说到test，/common|widgets/,name: "common",minChunks:,// 最少被两个模块引用才打包
minSize:,priority:,reuseExistingChunk: true,},},}
}

通过上述基础配置，我们已经建立了一个稳健的 webpack 程序。

工程化设计

多环境差异化配置

在实际工程中，我们必须区分开发环境与生产环境。环境侧重于调试体验和极快的反馈速度，而生产环境则追求更好的资源压缩和加载调整。我们将配置拆分为三个主要部分：

• webpack.base.js基础配置。包含多入口定义、模板生成等通用规则，作为其他环境的 基础。
• webpack.dev.js开发环境配置。集成热更新和调试工具，解决开发效率痛点。
• webpack.prod.js生产环境配置。侧重代码压缩、Tree Shaking及多线程打包。

webpack.dev.js 配置

const merge = require;const path = require
const webpack = require
// 基类配置
const baseConfig = require;const DEV_SERVER_CONFIG = {
HOST的观点是，'.',PORT:,HMR_PATH: '__hmr'。// 官方规定的热更新方法
TIMEOUT
}
// 开发阶段配置加入热更新
Object.keys.forEach(v => {
// 第三方包不作为 hmr 入口
if {
baseConfig.entry =,// 热更新入口
`${require.resolve}?path=http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/${DEV_SERVER_CONFIG.HMR_PATH}&timeout=${DEV_SERVER_CONFIG.TIMEOUT}&reload=true`
]
}
})
// 开发环境 webpack 配置
const webpackDevConfig = merge.smart(baseConfig,{
说到mode，'development',// 调试代码映射
devtool: 'eval-cheap-module-map'。// 开发阶段输出
output这方面，{
filename: 'js/_.js',path: path.resolve,'./app/public/dev/'),publicPath: `http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/public/dev`,globalObject: 'this'
},// 开发阶段插件
plugins:
})
module.exports = {
说到config，webpackDevConfig,devServer: DEV_SERVER_CONFIG // devServer 配置
};

webpack.prod.js 配置

const path = require;const merge = require;const os = require;const HappyPack = require;const MiniCssExtractPlugin = require;const CleanWebpackPlugin = require;const CSSMinimizerPlugin = require;const HtmlWebpackPluginAttributesPlugin = require;按理说，const TerserPlugin = require;// 基类配置
const baseConfig = require;// 多线程 build 配置
const happypackCommonConfig = {
再看debug。false,threadPool: HappyPack.ThreadPool.length }),};// 生产环境 webpack 配置
const webpackProdConfig = merge.smart(baseConfig,{
mode的观点是，'production',output: baseConfig.output = {
filename: 'js/_.js',path: path.join,'./app/public/dist'),publicPath: '/dist/prod/',crossOriginLoading: 'anonymous'
},module: {
再看rules，},{
说到test，/\.js$/,include:,use:
}]
},performance: {
再看hints，false // 禁用性能提示警告
},plugins:,{
从root来看，path.resolve,'./app/'),exclude:,verbose: true,dry: false
})。// 提取 CSS 公共部分，有效利用缓存
new MiniCssExtractPlugin({
chunkFilename: 'css/_.bundle.css',}),// 调整并压缩 CSS
new CSSMinimizerPlugin,// 多线程打包 JS，加快建立速度
new HappyPack({
...happypackCommonConfig,id: 'js',loaders:,plugins:
})}`]
}),// 多线程打包 CSS
new HappyPack({
...happypackCommonConfig,id: 'css',loaders:
}),// 浏览器请求资源时不发送身份凭证
new HtmlWebpackPluginAttributesPlugin({
corsOrigin: 'anonymous'
})
]
})
module.exports = webpackProdConfig;