![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 81
webpack
Y 铭
这个作者很懒,什么都没留下…
展开
-
webpack-打包优化
项目本身: 减少依赖嵌套深度 使用尽可能少的处理 webpack层面: Dll处理 通过include减少loader范围 HappyPack Uglify优化 减少resolve,sourcemap,cache-loader用新版本的node和webpack 代码分割 多页面: 主业务代码 + 公共依赖 + 第三方包 + webpack运行代码 单页面:主业务代码 + 异步模块 + 第三方包 + webpack运行代码 1.单页面 对于单页面,主要是拆分,减少体积,把需要异步加载的改成.原创 2021-04-29 12:17:40 · 292 阅读 · 0 评论 -
webpack—基础配置
1.webpack 命令 官方解释:webpack是一个现代的JavaScript应用的静态模块打包工具。 (1)使用全局webpack webpack4以上版本 webpack-cli --entry ./app.js --output build.js webpack4以下版本 webpack --entry ./app.js --output build.js (2)使用本地webpack package.json文件中 增加下面命令,打包会优先使用项目中的webpack打包。使用默认配置原创 2021-04-29 10:11:55 · 730 阅读 · 0 评论 -
webpack 打包优化
webpack 打包优化 速度优化 优化图片 使用 url-loader 优化, 将小图片转化成base64压缩,防止小图片太多请求次数太多。 :下载 url-loader npm install -D url-loader 2: 配置 在 webpack.prod.conf.js 文件夹中配置 module: { rules: [{ test: /\.(png|svg|jpg|gif)$/, use: [{原创 2021-03-14 11:17:02 · 89 阅读 · 0 评论 -
webpack
webpack webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果。 注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应。 从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去。 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。原创 2020-12-06 15:21:19 · 134 阅读 · 0 评论