人生百年几今日，今日不为真可惜。

文章目录背景官方多入口配置多项目打包步骤安装glob模块修改webpack.config.js 配置，新增entries函数，修改entry:entries()，修改output的filename为"[name].js"测试执行打包命令`npm run build`,结果如下。背景前面介绍过，Webpack不单单只支持单页面项目（SPA），也支持多页面项目（MPA）的打包。那么在多页面项目开发过程中，每新增一个页面模块，都需要修改webpack.config.js配置文件（增加一个入口），这个时候我们就

文章目录背景介绍资源内敛的意义使用步骤插件安装内联html内联js内联CSS直接使用`style-loader`借助 `html-inline-css-webpack-plugin`背景介绍首先什么是静态资源内联？静态资源内联，就说将CSS，JS，图片等静态资源，内联到html。比如上一文Webpack5之px自动转换成rem提到的，页面font-size大小计算的js脚本。我们可以通过静态资源内联来减少文件请求数量，优化加载速度。资源内敛的意义页面框架的初始化脚本，如rem换算等上报相关打点

文章目录背景介绍移动端 CSS px 自动转换成 rem背景介绍相信有过开发经验的同学都知道，无论你是做IOS，Android，还是前端开发，在做页面适配的话，都需要视频各种尺寸大小的屏幕。在传统的开发过程中，想要去适配不同大小的屏幕需要使用媒体查询实现@media screen and，这样一来适配多少个屏幕就需要编写多少个适配代码，无端添加工作量，切维护困难。为了结局上面地问题CSS3新增了一个相对单位rem。W3C 对 rem 的定义： font-size of the root elemen

文章目录背景使用步骤背景首先看文章标题，我们带着一个疑问，为什么CSS3需要带前缀呢？浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。各大浏览器的标准没有完全统一，导致各个浏览器地兼容不一样，到现在，依然还有很多属性需要带前缀。前缀浏览器内核-ms-IE浏览器Trident内核-moz-FirefoxGecko内核-o-OperaPresto内核-webkit-Chrome和SafariWebkit内核浏览器地兼容性问题，可以

文章目录HTML压缩CSS压缩JS压缩常遇坑位介绍我们在配置插件的时候有的是配置在`optimization.minimizer`中，有的是配置在`plugin`中，区别是什么？我们明明配置了`optimization.minimizer`为true ，但是为什么还是没有被压缩（无效）HTML压缩HtmlWebpackPlugin` 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该

文章目录什么是文件指纹文件指纹的作用文件指纹策略占位符介绍文件指纹的设置JS文件指纹设置图片文件指纹设置CSS文件指纹设置设置步骤文件指纹项目应用什么是文件指纹文件指纹是文件打包后输出的文件名的后缀，通常用来做一些文件的版本管理文件指纹的作用用作版本管理时，如果一个项目需要发布，只需要发布修改过的文件指纹；对于没有修改过的文件，用户在访问的时候，依旧可以使用浏览器缓存好的，无需二次加载，加速页面访问。文件指纹策略Hash和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash

文章目录Webpack中的文件监听启动 webpack 命令时，带上--watch参数再配置文件webpack.config.js中设置watch：true文件监听的与原理热更新安装webpack-dev-server配置package.json将webpack.config.js中node改为development引入webpack自带插件'webpack.HotModuleReplacementPlugin'插件配置devServerWebpack中的文件监听Webpack文件监听是指在开发过程中，

文章目录解析ES6babel具体使用步骤首先需要安装babel，以及相关依赖新增.babelrc配置文件，内容如下修改webpack.config.js文件解析CSS具体步骤解析Less和SaSS具体步骤解析图片使用步骤：解析字体使用步骤解析ES6webpack本身是支持原生js的解析，但是对于一些es6的语法特效，webpack原生是并不能了解到的，因此需要借助于babel-loaderbabel的配置文件：.babelrcbabel具体使用步骤首先需要安装babel，以及相关依赖np

文章目录核心概念entryentry的两种用法outputoutput两种用法loaders用法目前常见的Loadersplugins常用的Pluginsmode核心概念本文主要学习webpack入门的一些核心概念，包括webpack.config.js的entry，output，loaders，plugins，mode等，下面我们一个个来介绍entryentry是用来指定webpack的打包入口，Entry 属性指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，

文章目录认识webpack配置文件webpack配置结构环境搭建安装Node.js和NPMNVM安装Nodejs和NPM安装环境搭建安装webpack和webpack-cli创建空目录和package.json安装webpack和webpack-cli简单的DEMO手动创建webpack配置文件创建项目源文件执行打包命令认识webpack配置文件webpack默认配置文件：webpack.config.js可通过webpack --config 指定配置文件例如我们再开发环境将配置文件命名为web