雨的印记的博客

Webpack从入门到精通-进阶篇目录Webpack从入门到精通-进阶篇一、create-react-app react-project二、vue create vue-project三、自定义loader3.1预备知识3.2自定义babel-loader四、自定义plugin4.1 预备知识-compiler钩子4.1.2 tapable4.1.2 compiler钩子4.2 预备知识-compilation钩子4.2.1 小插曲：nodejs环境中调试4.2.2 compilation钩子4.3 自定

一、Webpack 简介1.1 webpack 是什么webpack 是一种 前端资源构建工具，一个静态模块打包器(module bundler)。在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。1.2 webpack 五个核心概念1.2.1 Entry入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。1.2.2

webpack 性能优化生产环境性能优化开发环境性能优化开发环境性能优化优化打包构建速度HMR (css/js/html)html 文件一般只有一个，不需要做js 文件默认是不支持的，需要自己写css 文件 经过 style-loader 处理，默认是做好的，所以我们也不需要操心优化代码调试 （分为生产环境和开发环境两种）source-map 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了， 通过映射可以追踪源代码错误）生产环境优化优化打包

webpack.config.js 文件来配置 webpackconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // 引入 html 文件，解决 html 文件不能热更新的问题 entry: ['./src/js/index.js', './src/index.html'], output: { fi.

/* 开发环境配置：能让代码运行 运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出*//** * HMR: hot module replacement (热模块替换) * 作用： 一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） * 极大提升构建速度 * * 样式文件： 可以使用 HMR 功能（因为 style-loader

详细注释const { resolve } = require('path')const MiniCssExtractorPlugin = require('mini-css-extract-plugin')const OptimiziCssAssetsWebpackPlugin = require('optimizi-css-assets-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')// 定.