单页面应用，接入cdn
摘要：出处：http://www.xbhub.com/wiki/webpack/4%E4%BC%98%E5%8C%96/4 9CDN%E5%8A%A0%E9%80%9F.html
阅读全文
posted @ 2019-07-06 16:52
随笔分类 - 前端：Webpack
webpack 中，module、chunk、bundle 的区别（待补充）
摘要：项目 | 区别 | module | 是开发中的单个模块 chunk | 中文意思是“块”，是指 webpack 在进行模块依赖分析的时候，代码分割出来的代码块 bundle |
阅读全文
posted @ 2019-03-14 17:07
webpack 中，importloaders 配置项的含义
摘要：importLoaders：用于配置「css loader 作用于 @import 的资源之前」有多少个 loader。 1. 2. 3. 官方介绍： "https://webpack.docschina.org/loaders/css loader/ importloaders"
阅读全文
posted @ 2019-03-13 16:37
optimization.splitChunks 中，chunks 的3个值：all、async、initial 的含义
摘要：chunks 参数值 | 含义 | all | 把动态和非动态模块同时进行优化打包；所有模块都扔到 vendors.bundle.js 里面。 initial | 把非动态模块打包进 vendor，动态模块优化打包 async | 把动态模块打包进 vendor，非动态模块保持原样（不优化） 一篇介
阅读全文
posted @ 2018-12-12 18:04
webpack 打包产生的文件名中，hash、chunkhash、contenthash 的区别
摘要：table th:first of type { width: 90px; } hash 类型 | 区别 | hash | 每一次打包都会生成一个唯一的 hash chunkhash | 根据每个 chunk 的内容来生成；chunk打包时，output.filename、output.chunkF
阅读全文
posted @ 2018-12-12 15:55
webpack 提取 manifest 文件
摘要：当 webpack 生成 bundle 时， 它同时维护一个 manifest 文件。你可以在生成的 vendor bundle 中找到它。manifest 文件描述了哪些文件需要 webpack 加载。 如果 webpack 生成的 hash 发生改变，manifest 文件也会发生改变。因此，v
阅读全文
posted @ 2018-12-12 15:50
output.filename 与 output.chunkFilename 的区别
摘要：output.filename 此选项决定了entry入口文件输出 bundle 的名称。 注意，此选项不会影响那些「按需加载 chunk」的输出文件。对于这些文件，请使用 output.chunkFilename 选项来控制输出。通过 loader 创建的文件也不受影响。在这种情况下，你必须尝试
阅读全文
posted @ 2018-12-12 15:42
webpack4升级篇
摘要：出处：http://blog.poetries.top/2018/11/25/webpack4 update/?utm_source=tuicool&utm_medium=referral
阅读全文
posted @ 2018-12-12 15:12
webpack 中的 chunk 种类
摘要：webpack 将 chunk 划分为三类： 1. 入口 chunk。入口 chunk 包含 webpack runtime 和将要加载的模块。 2. 普通 chunk。普通 chunk 不包含 webpack runtime，这些 chunk 可以在应用运行时动态加载。 3. 初始 chunk。初
阅读全文
posted @ 2018-12-12 12:05
Webpack4 的 Tree Shaking：babel-loader设置modules： false，还是设置"sideEffects": false，待确定
摘要：Webpack4 的 Tree Shaking：babel loader设置modules： false，还是设置"sideEffects": false，待确定 babel loader设置modules： false，https://www.cnblogs.com/cag2050/p/10086
阅读全文
posted @ 2018-12-12 12:01
没有了CommonsChunkPlugin，咱拿什么来分包（译）
摘要：webpack 4 移除 CommonsChunkPlugin，取而代之的是两个新的配置项（optimization.splitChunks 和 optimization.runtimeChunk）。 详细介绍：https://github.com/yesvods/Blog/issues/15
阅读全文
posted @ 2018-12-12 10:52
splitChunks. cacheGroups 里面的 maxInitialRequests 含义
摘要：entry文件请求的chunks不应该超过此值（请求过多，耗时） 出处：https://ymbo.github.io/2018/05/21/webpack%E9%85%8D%E7%BD%AE%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2/ %E4%B8%89%E3%80%8
阅读全文
posted @ 2018-12-12 10:37
webpack报错：Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '...' - Did you mean "@babel/env"?
摘要：webpack报错： 原因： babel core和babel preset env依赖被替换为@babel/core和@babel/preset env，因为新版本的Babel7中对官方提供的依赖使用了命名空间@babel 解决： 在.babelrc文件或在webpack.config.js文件中
阅读全文
posted @ 2018-12-08 14:08
Webpack 的 Tree Shaking
摘要：为什么要使用 Tree Shaking？ 当从某文件模块中导出（某一个或几个变量、函数、对象等），然而这个文件模块还有许多其它（我们这次并不需要）的导出，webpack会不管三七二十一简单粗暴的将整个模块包含进来，使得我们最终打包的文件里有了许多不需要的垃圾。这就到了tree shaking出手的地
阅读全文
posted @ 2018-12-08 10:46
webpack 相关插件及作用（表格）
摘要：webpack 相关插件及作用： table th:first of type { width: 200px; } table th:nth of type(2) { width: 140px; } 插件 | 默认启用 | 作用 | | UglifyJsPlugin | production模式时
阅读全文
posted @ 2018-12-07 11:50
启用 webpack 的模块热替换特性
摘要：启用 webpack 的模块热替换特性： 注意，必须有 webpack.HotModuleReplacementPlugin 才能完全启用 HMR。如果 webpack 或 webpack dev server 是通过 hot 选项启动的，那么这个插件会被自动添加，所以你可能不需要把它添加到 web
阅读全文
posted @ 2018-12-07 11:36
DefinePlugin插件
摘要：这个插件允许你创建全局常量用于编译时解析。如果设置mode："production",webpack默认会设置"process.env.NODE_ENV": JSON.stringify("production")。 注意因为直接文本替换，所给的属性值必须包括引号，要这么做JSON.stringif
阅读全文
posted @ 2018-12-06 16:49
babel-loader和webpack UglifyJS一起使用时console的问题
摘要：一起使用babel loader和webpack UglifyJS时，babel会优先处理一遍代码，编译后的代码才进入webpack进行打包和优化操作。 出处：https://www.tangshuang.net/3666.html
阅读全文
posted @ 2018-12-06 16:22
uglifyjs-webpack-plugin 插件，drop_console 默认为 false（不清除 console 语句），drop_debugger 默认为 true（清除 debugger 语句）
摘要：uglifyjs webpack plugin 插件，drop_console 默认为 false（不清除console语句），drop_debugger 默认为 true（清除 debugger 语句） https://github.com/webpack contrib/uglifyjs web
阅读全文
posted @ 2018-12-06 15:47
webpack 的 入口（Entry）、输出（Output）
摘要：入口（Entry） 入口定义了我们的应用代码开始执行的那个文件，webpack从这个文件开始打包。你能定义一个入口点（常见于单页应用 Single Page Application）， 或者多个入口点（常见于多页应用 Multiple Page Application）。 定义一个入口点就生成一个c
阅读全文
posted @ 2018-11-26 17:46
