互联网网站建设是什么/福州百度首页优化
/**
- 2020-7-8
- 冷雨看前端
- 今日高考最后一天：考生加油！
*/
入门指导的一些基础项目，欢迎新手下载亲自调试看下
入门简单案例
entry
// 单入口entry:{index:'./src/js/index.js'},// 多入口entry:{index:'./src/js/index.js',test:'./src/js/test.js'},
output
output: {// [name]：取文件名filename: 'js/[name].[hash:10].js',//文件哈希值前面十位path: resolve(__dirname, 'build')//当前路径下会新建一个build路径},
loader
oader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块
module: {rules: [{ test: /\.css$/, use: 'css-loader' },{ test: /\.ts$/, use: 'ts-loader' }]}
plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');//html模板插件
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');//依赖分析插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');//清除原bundle纪录的插件```javascript
plugins: [new HtmlWebpackPlugin({ filename: 'index.html',template: 'src/index.html'}),new BundleAnalyzerPlugin(),new CleanWebpackPlugin({verbose: true,})],
mode
development:开发模式下
production：生成模式下
通常我们会配置两份，一份专门用来开发测试用，一份专门用线上环境
optimization
optimization: {splitChunks: {chunks: 'all'// 默认值，可以不写~，如果不写，系统会默认有自己的一套规则/* minSize: 30 * 1024, // 分割的chunk最小为30kbmaxSize: 0, // 最大没有限制minChunks: 1, // 要提取的chunk最少被引用1次maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量maxInitialRequests: 3, // 入口js文件最大并行请求数量automaticNameDelimiter: '~', // 名称连接符name: true, // 可以使用命名规则cacheGroups: {// 分割chunk的组// node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js// 满足上面的公共规则，如：大小超过30kb，至少被引用一次。vendors: {test: /[\\/]node_modules[\\/]/,// 优先级priority: -10},default: {// 要提取的chunk最少被引用2次minChunks: 2,// 优先级priority: -20,// 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块reuseExistingChunk: true} }*/},// 将当前模块的记录其他模块的hash单独打包为一个文件 runtime// 解决：修改a文件导致b文件的contenthash变化runtimeChunk: {name: entrypoint => `runtime-${entrypoint.name}`},minimizer: [// 配置生产环境的压缩方案：js和cssnew TerserWebpackPlugin({// 开启缓存cache: true,// 开启多进程打包parallel: true,// 启动source-mapsourceMap: true})]}
默认规则：
可以共享新块，或者模块来自node_modules文件夹
新的块将大于30kb（在min + gz之前）
按需加载块时并行请求的最大数量将小于或等于6
初始页面加载时并行请求的最大数量将小于或等于4
bundle分析
webpack会根据你
1、entry入口
2、import（））动态引入
import(/* webpackChunkName: 'testChunk2' */'./test2.js').then(({ mul }) => {//Magic Comments（魔术注释法）https://webpack.js.org/api/module-methods/#magic-commentsconsole.log(mul(1, 2));
});
3、optimization下的splitChunks拆分代码，不设置optimization，也会采用系统默认的规则
特别功能说明：
all：把动态和非动态模块同时进行优化打包；所有模块都扔到 vendors.bundle.js 这边vendors名字我们可以自行配置，系统默认就采用vendors命名
initial：把非动态模块打包进 vendor，动态模块优化打包
async：把动态模块打包进 vendor，非动态模块保持原样
字段优先级：
minSize > maxSize > maxInitialRequest/maxAsyncRequests
Node.js解析模块流程
为了理解TypeScript编译依照的解析步骤，先弄明白Node.js模块是非常重要的。 通常，在Node.js里导入是通过 require函数调用进行的。 Node.js会根据 require的是相对路径还是非相对路径做出不同的行为。
相对路径很简单。 例如，假设有一个文件路径为 /root/src/moduleA.js，包含了一个导入var x = require("./moduleB"); Node.js以下面的顺序解析这个导入：
检查/root/src/moduleB.js文件是否存在。
检查/root/src/moduleB目录是否包含一个package.json文件，且package.json文件指定了一个"main"模块。 在我们的例子里，如果Node.js发现文件 /root/src/moduleB/package.json包含了{ “main”: “lib/mainModule.js” }，那么Node.js会引用/root/src/moduleB/lib/mainModule.js。
检查/root/src/moduleB目录是否包含一个index.js文件。 这个文件会被隐式地当作那个文件夹下的"main"模块。
你可以阅读Node.js文档了解更多详细信息：file modules 和 folder modules。
但是，非相对模块名的解析是个完全不同的过程。 Node会在一个特殊的文件夹 node_modules里查找你的模块。 node_modules可能与当前文件在同一级目录下，或者在上层目录里。 Node会向上级目录遍历，查找每个 node_modules直到它找到要加载的模块。
还是用上面例子，但假设/root/src/moduleA.js里使用的是非相对路径导入var x = require(“moduleB”);。 Node则会以下面的顺序去解析 moduleB，直到有一个匹配上。
/root/src/node_modules/moduleB.js
/root/src/node_modules/moduleB/package.json (如果指定了"main"属性)
/root/src/node_modules/moduleB/index.js
/root/node_modules/moduleB.js
/root/node_modules/moduleB/package.json (如果指定了"main"属性)
/root/node_modules/moduleB/index.js
/node_modules/moduleB.js
/node_modules/moduleB/package.json (如果指定了"main"属性)
/node_modules/moduleB/index.js
注意Node.js在步骤（4）和（7）会向上跳一级目录。
参考链接地址：node.js模块解析