node_modules

node_modules/.cache/webpack},watch:

true,module:

module)是一种模块类型它允许使用资源文件字体图标等而无需配置额外

loader在

document.body.appendChild(img);webpack.config.js

webpack.config.js

/\.(jpg|png|gif)$/,type:asset}]

}新方式

新的方式语法是为了允许在没有打包工具的情况下运行代码。

这种语法也可以在浏览器中的原生

ECMAScript

document.body.appendChild(img);URIs

Webpack

或原始编码,MimeType可以在module.rule中被映射到加载器和模块类型支持http(s)

src\index.js

https://img.zhufengpeixun.com/zfjg.png;

console.log(data,url);webpack.config.js

const

webpack.experiments.schemes.HttpsUriPlugin()]

}moduleIds

webpack打包最终生成的代码块代码块会生成文件一个文件对应一个chunk

在webpack5之前没有从entry打包的chunk文件都会以1、2、3…的文件命名方式输出,删除某些些文件可能会导致缓存失效在生产模式下默认启用这些功能chunkIds:

“deterministic”,

可选值含义示例false不应使用任何内置算法,插件提供自定义算法Path

variable

[name].jsnatural按使用顺序的数字ID1named方便调试的高可读性idsrc_two_js.jsdeterministic根据模块名称生成简短的hash值915size根据模块大小生成的数字id0

const

development,devtool:false,optimization:{moduleIds:deterministic,chunkIds:size},module:

{rules:

webpack4带了许多Node.js核心模块的polyfill,一旦模块中使用了任何核心模块(如crypto)这些模块就会被自动启用webpack5不再自动引入这些polyfill

cnpm

console.log(CryptoJS.MD5(zhufeng).toString());webpack.config.js

resolve:{/*

require.resolve(crypto-browserify),buffer:

require.resolve(buffer),stream:require.resolve(stream-browserify)},

*/fallback:{

false,stream:false}},更强大的tree-shaking

tree-shakingwebpack4

webpack从入口遍历所有模块的形成依赖图,webpack知道那些导出被使用遍历所有的作用域并将其进行分析消除未使用的范围和模块的方法webpack-deep-scope-demowebpack-deep-scope-analysis-plugin

作用域

Shaking也就是将没有引入的方法等不进行打包到打包输出文件中

package.json

现在能够跟踪对导出的嵌套属性的访问这可以改善重新导出命名空间对象时的Tree

src\index.js

console.log(calculator.operators.add);src\calculator.js

src\calculator.js

console.log(getPostUrl,getPostUrl);src\api.js

src\api.js

支持以下构造exports|this|module.exports.xxx

require(“…”)

(reexport)exports|this|module.exports.xxx

require(“…”).xxx

(reexport)Object.defineProperty(exports|this|module.exports,

“xxx”,

…)require(“abc”).xxxrequire(“abc”).xxx()

src\index.js

console.log(api.getPostUrl);src\api.js

src\api.js

}exports.getPostUrlgetPostUrl;splitChunks

split-chunks-plugin