![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack 从入门到精通
潇潇的雨幕里
好记性不如烂笔头
展开
-
6. webpack 性能优化总结
webpack性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR优化代码调试source-map生产环境性能优化优化打包构建速度oneOfbabel缓存多进程打包externalsdll优化代码运行的性能缓存(hash-chunkhash-contenthash)tree shakingcode split懒加载/预加载pwa...原创 2022-03-20 19:01:57 · 956 阅读 · 0 评论 -
5. webpack 优化配置
第 5 章:webpack 优化配置* 开发环境性能优化* 生产环境性能优化开发环境性能优化* 优化打包构建速度 * HMR* 优化代码调试 * source-map生产环境性能优化* 优化打包构建速度 * oneOf * babel缓存 * 多进程打包 * externals * dll* 优化代码运行的性能 * 缓存(hash-chunkhash-contenthash) * tree shaking * code split * 懒加载/原创 2022-03-13 18:34:45 · 297 阅读 · 0 评论 -
4. webpack 生产环境的基本配置
第 4 章:webpack 生产环境的基本配置开发环境: 源代码 -> webpack+自动化 -> bundle开发环境中:比如1. css -> loader -> js ; css经过loader加载会加入到js代码中;会使js代码体积变大;由于先加载js后再插入style标签,会存在闪现现象;....生产环境中: 以下操作放在开发环境的话会拖慢开发环境的构建速度,即打包速度较慢,影响开发效率; 4.1 提取 css 成单独文件1. 下载安装包2原创 2022-03-13 10:08:17 · 1587 阅读 · 0 评论 -
3. webpack 开发环境的基本配置
第 3 章:webpack 开发环境的基本配置3.1 创建配置文件1. webpack.config.js const { resolve } = require('path'); // node 内置核心模块,用来处理路径问题。 module.exports = { entry: './src/js/index.js', // 入口文件 output: { // 输出配置 filename: './built.js', // 输出文件名 path: resolve(__d原创 2022-03-06 19:46:49 · 679 阅读 · 0 评论 -
2. webpack 的初体验
2. webpack 的初体验2.1 初始化配置1. 初始化 package.json npm init2. 下载并安装 webpacknpm install webpack webpack-cli -g // 全局安装npm install webpack webpack-cli -D // 本地安装 开发依赖 生成package-lock.json//通过 webpack-cli 的指令使用 webpack 的功能2.2 编译打包应用1. 创建文件入口文件:原创 2022-03-06 19:32:23 · 415 阅读 · 0 评论 -
1. webpack 简介
第 1 章:webpack 简介1.1 webpack 是什么webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。...原创 2022-03-06 17:18:17 · 96 阅读 · 0 评论