小丕的博客

webpack性能优化 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 HMR 优化代码调试 source-map 生产环境性能优化 优化打包构建速度 oneOf babel缓存 多进程打包 externals dll 优化代码运行的性能 缓存(hash-chunkhash-contenthash) tree shaking code split 懒加载/预加载 pwa ...

第 5 章：webpack 优化配置 * 开发环境性能优化 * 生产环境性能优化 开发环境性能优化 * 优化打包构建速度 * HMR * 优化代码调试 * source-map 生产环境性能优化 * 优化打包构建速度 * oneOf * babel缓存 * 多进程打包 * externals * dll * 优化代码运行的性能 * 缓存(hash-chunkhash-contenthash) * tree shaking * code split * 懒加载/

第 4 章：webpack 生产环境的基本配置 开发环境： 源代码 -> webpack+自动化 -> bundle 开发环境中：比如 1. css -> loader -> js ； css经过loader加载会加入到js代码中；会使js代码体积变大；由于先加载js后再插入style标签，会存在闪现现象； .... 生产环境中： 以下操作放在开发环境的话会拖慢开发环境的构建速度，即打包速度较慢，影响开发效率； 4.1 提取 css 成单独文件 1. 下载安装包 2

第 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

2. webpack 的初体验 2.1 初始化配置 1. 初始化 package.json npm init 2. 下载并安装 webpack npm install webpack webpack-cli -g // 全局安装 npm install webpack webpack-cli -D // 本地安装 开发依赖 生成package-lock.json //通过 webpack-cli 的指令使用 webpack 的功能 2.2 编译打包应用 1. 创建文件 入口文件：

第 1 章：webpack 简介 1.1 webpack 是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 ...