webpack记录

webpack –profile –json > stats.json 生成分析文件

模块打包工具

1
2
3
webpack --watch #监听变化
webpack-dev-server # 热更新服务器,通过devServer来配置
webpack-merge # webpack提供的深层合并对象方法
1
2
3
import
/* webpackPrefetch */
/* webpackPreload */

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
{
entry: "index.js", // 入口文件,可以使用对象类型配置多个入口,键为输出的文件名
output: {
publicPath: "", // 地址前缀
filename: "main.js", // 支持占位符[name], contenthash
path: "保存绝对路径,默认当前目录的dist",
chunkFilename: "", // 分割文件名
library: "", // 将导出的对象挂载到这个变量上
libraryTarget: "umd", // 作为库公开协议,支持AMD, CommonJS, ES6
},
resolve: {
extensions: [], // 自动补全的后缀
mainFiles: [], // 导入文件夹下的默认名称
alias: { // 别名

}
}
externals: ["lodash"], // 在打包时排除指定的包,数组或对象
mode: "production/development", // 设置打包环境
devtool: "", // 映射关系
// none
// source-map
// eval
// module
// cheap
// cheap-module-eval-source-map
devServer: { // 需要安装 webpack-dev-server
overlay: true/false, // 在浏览器输出错误
contentBase: "./dist", // 目标文件夹
port: 8080, // 监听端口,默认8080
open: true/false, // 自动打开浏览器
// HMR 资源局部刷新(热更新)Hot Module Relacement
hot: true/false, // 开启HMR 1
hotOnly: true/false, // 开启HMR 2 // 在HMR失效的时候不刷新
// 需要启用 webpack.HotModuleReplacementPligin 插件 3
// js需要设置 module.hot.accept 进行回调
historyApiFallback: true/false, // 在开发单页应用时将请求代理到入口
proxy: { // 请求代理
请求地址: 代理域名,
请求地址: {
target: 代理域名,
secure: true/false, // 启用https
pathRewrite: {
重写地址支持正则: 重写地址
},
changeOrigin: true/false, // 防止反爬虫
}
}
},
resolveLoader: {
modules: ['node_modules', './my_loaders'] // 在这个路径下搜索loader
},
module: {
rules: [
{
test: /规则正则/,
use: { // 可以使用数组表示多个loader
exclude: /正则规则/, // 排除目录, 正则对象, 与include相反
loader: "打包方案(loader)", // 从下向上执行
// file-loader: 文件整理
// url-loader: 链接整理
// css-loader: 引入css
// style-loader: 将css放到head部分
// sass-loader: sass编译
// postcss-loader: 自动添加css前缀
// ts-loader: Type-script, 需要安装type-script
// eslint-loader
// 打包优化
// thread-loader
// parallel-webpack
options: {
// 打包方案配置
name: "保存名称规则,支持占位符",
importLoader: 2,
outputPath: "该规则对应的文件打包文件夹"
limit: 2048, // 当小于此值的时候直接打包为base64到js中,否则打包为文件
}
}
}
]
},
plugins: [
// 插件对象,需要先导入后new
// html-webpack-plugin: 模板生成插件, template:模板文件名,filename:输出文件名,chunk:需要引入的入口文件
// clean-webpack-plugin: 自动清理dist文件夹,(['dist'])
// mini-css-extract-plugin
// webpack
// HotModuleReplacementPlugin 热更新模块
// ProvidePlugin 自动导入模块(检测到指定字符串后自动导入该模块)
// DllPlugin 缓存依赖映射文件,加快打包速度
// DllReferencePlugin // 使用缓存映射文件,加快打包速度 node->fs.readdirSync
// WorkboxWebpackPlugin PWA技术
// add-asset-html-webpack-plugin 给html额外增加内容(filepath)
],
optimization: {
usedExports: true/false, // 启用Tree Shaking, 在package.json中配置sideEffects自动导入没有导出内容的模块, 在生产环境自动为true
splitChunks: { // Code Splitting 模块文件编译分割
}
},
performance: {
hints: false
}, // 屏蔽性能警告
}
1
2
3
4
5
6
// module.exports = {
// entry: '入口',
// output: {

// }
// }
支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励