深入浅出 webpack 之基础配置篇 (8)

实现这样的效果我们并不需要对 webpack 的配置做任何改动，依然是利用 ES6 提供的 import() 语法配合魔法注释来实现。

document.addEventListener("click",()=>{ import(/* webpackPrefetch: true */ /* webpackChunkName: "lodash" */ "lodash").then(({default:_})=>{ console.log(_.join(["a","b"],"-")); }); },false);

执行打包命令后查看浏览器控制台：

文件缓存策略

我们打包的静态资源文件是要发布到服务器上的，例如静态资源名字为 main.js  ，此时如果线上有一个 bug，我们肯定是立即修复，然后立即打包并把静态资源更新到服务器上，如果不更改文件名，由于浏览器的缓存问题，用户是没有办法立马看到效果的，因此我们可以给文件名添加 hash 的配置

output: { // 出口文件 publicPath:"", filename: '[name].[hash].js', chunkFilename:'[name].[hash].js', path: path.resolve(__dirname,'dist') },

业务代码：

import { forEach } from "lodash"; import $ from "jquery"; $(function () { forEach([1,2,3],(item)=>{ console.log(item); }) });

打包之后会输出两个 ja 文件

main.[hash].js 的入口文件

vendors~main.[hash].js 的 chunk 文件

它们公用同一个 hash 值，此时当我修改了业务代码：

$(function () { forEach([1,2,3,4,5,6],(item)=>{ console.log(item); }) });

业务代码变了，但是我们引入的第三方库是没有任何改变的，当再次执行打包，两类文件的 hash 值都改变了，此时我们部署到服务器，用户浏览器的确可以重新加载并且立马看到效果，但是用户不应该重新加载第三库的代码呀，这些可是没有变化的。此时我们就应该使用 webpack 提供的 [contenthash] 配置，它代表的意思是，只有内容改变的模块文件 hash 值会变化，内容不改变的文件 hash 值保持原样

output: { publicPath:"", filename: '[name].[contenthash].js', chunkFilename:'[name].[contenthash].js', path: path.resolve(__dirname,'dist') } 开发环境与生成环境

在 webpack 配置中提供了 mode 属性配置开发环境与生产环境，我们来总结这两个环境它们在工程配置上有什么区别：

功能 \ 环境 Develoment（开发） Production（生产）
代码压缩   不压缩(方便调试)   压缩(减小代码体积)  
Tree Shaking   默认不开启   默认开启  
Source Map   cheap-module-eval-source-map   cheap-module-source-map  
webpackDevServer（本地服务）   需要开启   不需要  
HMR（热更新）   需要配置   不需要  

正常我们去编写 webpack 配置时，会分文件进行配置的，因为生产环境和开发环境差异还是非常大的。

配置文件分离思路：

提取一个公共配置，例如 js 处理，css 处理，图片等资源的处理，在开发环境和生产环境都是一样的；

单独配置一个开发环境和生产环境配置，然后通过 webpack-merge 合并公共配置：

const webpack = require('webpack'); const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common,{ mode: 'development', ... }); 配置全局变量 plugins: [ ... new webpack.ProvidePlugin({ $:"jquery", _:"loadsh" }) ]

配置好了 $ 与 _ 的全局变量后，我们在后续编写模块时可以不需要引入而直接使用：

export function ui (){ $('body').css('background','green'); } 使用环境变量

package.json

"scripts": { "dev-build": "webpack --env.development --config webpack.common.js", "dev": "webpack-dev-server --env.development --config webpack.common.js", "build": "webpack --env.production --config webpack.common.js" },

增加了： --env.development 、 --env.production 。