![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
webpack学习
crazy~rabbit
这个作者很懒,什么都没留下…
展开
-
webpack高级用法(1):自动清理构建目录、多页面应用打包
目录1 自动清理构建目录1.1 插件安装1.2 配置2 自动补齐CSS3前缀2.1 插件安装2.2 配置3 移动端CSS px自动转换为rem3.1 插件安装3.2 配置3.3 配置4 资源内联1 自动清理构建目录避免每次构建前需要手动删除dist,使用clean-webpack-plugin,默认会删除 output 指定的输出目录1.1 插件安装npm i clean-webpack-plugin -D1.2 配置...const {CleanWebpackPlugin} = req原创 2020-08-19 22:18:38 · 259 阅读 · 0 评论 -
webpack基础用法(1):核心概念
目录1 核心概念:entry2 核心概念:output3 核心概念:loaders4 核心概念:plugins5 核心概念:mode1 核心概念:entryentry 用来指定 webpack 的打包入口//单入口:entry是一个字符串module.exports = { enter: './src/index.js'}//多入口:entry是一个对象module.exports = { enter: { index: './src/index.js', searc原创 2020-08-04 18:49:12 · 137 阅读 · 0 评论 -
webpack基础用法(2):loaders
目录1 解析ES6和React JSX,babel-loader1.1 安装依赖1.2 配置 .babelrc 文件1.3 配置 webpack.config.js 文件2 解析CSS2.1 依赖安装2.2 配置 webpack.config.js 文件3 解析Less3.1 依赖安装3.2 配置 webpack.config.js 文件4 解析图片和字体4.1 解析图片4.1.1 依赖安装4.1.2 配置 webpack.config.js 文件4.2 解析字体4.2.1 依赖安装4.2.2 配置 web原创 2020-08-17 18:12:31 · 119 阅读 · 0 评论 -
webpack基础用法(3):文件监听及热更新
目录1 文件监听1.1 配置方式1.2 监听原理2 浏览器热更新2.1 使用`webpack-dev-server` 配合 `HotModuleReplacementPlugin`2.1.1 安装依赖2.1.2 在`package.json`中的`scripts`中加入如下配置2.1.3 在`webpack.config.js`中加入如下配置2.2 使用`webpack-dev-middleware`2.2.1 安装依赖2.2.2 `server.js`2.2.3 在`package.json`中的`scr原创 2020-08-17 20:13:21 · 466 阅读 · 0 评论 -
webpack基础用法(4):文件指纹策略和压缩
目录1 文件指纹策略1.1 JS的文件指纹设置1.2 CSS的文件指纹设置1.2.1 安装插件1.2.2 配置1.3 图片的文件指纹设置2 代码压缩2.1 JS压缩2.2 CSS压缩2.2.1 安装依赖2.2.2 配置2.3 html文件压缩2.3.1 安装依赖2.3.2 配置1 文件指纹策略文件指纹是指打包后输出的文件名的后缀指纹策略:Hash:和整个项目的构建相关,只要项目文件有修改,整个项目构建的hash值就会更改Chunkhash:和 webpack 打包的 chunk 有关, 不同的原创 2020-08-17 22:39:34 · 318 阅读 · 0 评论