webpack中文文档——指南笔记

npm i安装依赖node_modules

起步

准备文件：略
构建：npx webpack，默认打包main.js到src目录

管理资源

加载 CSS：

1.依赖

2.配置
3.新建css文件
4.index.js引入
5.打包

加载图片

字体

加载数据

---

管理输出

输出多个bundle.js

HtmlWebpackPlugin

注意：webpack和webpack-cli不能是全局安装的，否则build时会报错：Cannot find module ‘webpack/lib/node/NodeTemplatePlugin’
生成的html:自动引入bundle.js

清理 /dist 文件夹

报错：

1. CleanWebpackPlugin is not a constructor 不是一个函数
   原因：版本更新。
   解决：const CleanWebpackPlugin = require(‘clean-webpack-plugin’)
   改为：const {CleanWebpackPlugin} = require(‘clean-webpack-plugin’)
   2.clean-webpack-plugin only accepts an options object
   参数不对
   原因：版本更新
   解决：new CleanWebpackPlugin([‘dist’])改为new CleanWebpackPlugin(),插件会自动获取output的配置

开发

source map

热更新

webpack’s Watch Mode唯一的缺点是，为了看到修改后的实际效果，你需要刷新浏览器。

模块热替换

Hot Module Replacement 或 HMR不适用于生产环境，这意味着它应当只在开发环境使用。
vue-cli是node配置

tree shaking

将文件标记为无副作用(side-effect-free)

压缩输出

问题：dist文件夹不知道什么时候变成空了…
执行npm run build后打包出来了

生产环境构建

按照文档配置完，报错，应该是babel包方面的，没有解决…
没办法了，把vue-cli的babel全部相关的包的负责到package.json，build成功了。然后慢慢删除，测试，最后只剩下"babel-core": “^6.22.1”,
“babel-loader”: “^7.1.1”,
“babel-preset-es2015”: “^6.24.1”

代码分离

build报错：

应该是版本变更导致写法改变，百度，改为下面解决：
添加属性

动态引入

报错，没有解决

懒加载

缓存

此指南的重点在于通过必要的配置，以确保 webpack 编译生成的文件能够被客户端缓存，而在文件内容变化后，能够请求到新的文件。
如果我们不做修改，然后再次运行构建，我们以为文件名会保持不变。然而，如果我们真的运行，可能会发现情况并非如此：（译注：这里的意思是，如果不做修改，文件名可能会变，也可能不会。）
测试：哈希值没有改变
optimization写法：

模块标识符

解决：未更改的包不需要每次build的hash值变化

library

用于开发库，暴露接口给使用者

shimming

webpack 编译器(compiler)能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些第三方的库(library)可能会引用一些全局依赖（例如 jQuery 中的 $）。这些库也可能创建一些需要被导出的全局变量。这些“不符合规范的模块”就是 shimming 发挥作用的地方。

shimming 全局变量

将lodash暴露为全局变量，代替import引入方式：
导出单个属性：

细粒度 shimming

全局 exports

加载 polyfills

渐进式网络应用程序

渐进式网络应用程序(Progressive Web Application - PWA)，是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。

TypeScript

source map

使用环境变量

性能

使用 cache-loader 启用持久化缓存。使用 package.json 中的 “postinstall” 清除缓存目录。