webpack
QHQLemon
这个作者很懒,什么都没留下…
展开
-
7.webpack开启本地服务器
1. webpack-dev-server(1)webpack-dev-server:开启本地服务器,并自动监听工程文件(不包括配置文件),自动刷新浏览器(2)全局/局部安装npm install webpack-dev-server -g npm install webpack-dev-server --save-dev devServer: { ...原创 2019-12-23 11:36:47 · 434 阅读 · 0 评论 -
6.webpack图片处理
url-loader:可以替代file-loader,打包图片文件img-loader:压缩图片html-loader:使html文件中引入的图片得到处理const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const {CleanWebpackPlugin} =...原创 2019-12-23 11:32:02 · 178 阅读 · 0 评论 -
5.提取公共js代码
针对多入口js文件,当引入多个相同的自定义模块或者第三方库的时候,提取公共的js代码,减少代码冗余,提高页面加载速度module.exports = { entry: { index: './src/index.js', pageC: './src/pageC.js' }, output: { path: path.re...原创 2019-12-23 11:28:50 · 1132 阅读 · 0 评论 -
4.webpack处理html
html-webpack-plugin:打包压缩html,并自动引入本次打包的js、css文件等clean-webpack-plugin:只保存本次打包的结果安装cnpm install html-webpack-plugin clean-webpack-plugin -Dconst MiniCssExtractPlugin = require('mini-css-extract-...原创 2019-12-23 11:25:06 · 196 阅读 · 0 评论 -
3.postcss
postcss: postcss 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量,混入(mixin),转换未来的 CSS 语法,内联图片等操作。postcss-loader:使用postcss在webpack处理css的加载器autoprefixer:postcss的插件,用于解析css和增加前缀cssnano:postcss的插件,压缩css代码postc...原创 2019-12-23 11:21:20 · 130 阅读 · 0 评论 -
2. css tree shaking
1.打包压缩css文件css-loader: 加载解析文件,如遇到@import会将相应的样式文件引入(如没有css-loader则不会引入该文件)style-loader:将解析的css放style标签,插入head标签里(css样式打包到main.js文件里)实例:/* demo.css*/body{ background: #ccc;}div{ ...原创 2019-12-23 11:15:46 · 493 阅读 · 0 评论 -
1.js tree shaking
1.在js中有引入自定义的模块和第三方库的情况当引入自定义的模块但没有使用其中某些方法时,webpack --mode development会将没有使用到的一起打包,但生产环境下webpack会将其没有使用到的方法剔除掉 当仅引入第三方库,没有使用其中任何方法时,情况同上 当在自定义的方法中使用了第三方库的方法,而却没有调用该自定义方法时,在生产环境下也会第三方库也会被打包注:在自定义...原创 2019-12-23 11:01:14 · 281 阅读 · 0 评论 -
webpack导图
1.内容导图2.内容链接(1)js tree shaking(2)css tree shaking(3)postcss(4)webpack处理html(5)提取公共js代码(6)webpack图片处理(7)webpack开启本地服务器...原创 2019-12-23 10:53:09 · 172 阅读 · 0 评论