初始化项目
1 | yarn init -y |
添加 webpack-cli
1 | yarn add webpack-cli -D |
基础配置:(webpack.config.js)
1 | let path = require('path'); |
打包命令:
1 | // 可通过 --config 传入参数设置配置文件名称 默认(webpack.config.js) |
webpack node方式启动项目
1 | yarn add webpack-dev-server -D |
配置文件添加配置:
1 | devServer: { |
添加脚本
1 | "script": { |
安装 htmlWebpackPlugin 插件
将打包后的js,注入到 html 模板中
1 | yarn add html-webpack-plugin -D |
配置文件:
1 | let htmlWebpackPlugin = require('html-webpack-plugin') |
样式处理
引入适合的loader,在配置 loader 处理规则
css-loader 处理 @import 这种语法映入的样式
style-loader 把css 插入到 head 标签中
处理 less: less-loader
处理 sass: node-sass sass-loader
处理 stylus: stylus-loader
配置:
1 | module.exports = { |
样式抽离:mini-css-extract-plugin
为啥要用这个?
上述配置 最终都是通过 style-loader 将 样式转化为 style 标签插入到 head 标签中
而这个插件则是将 css 转化为 link 标签 再 插入 head 中、
它用于代替 style-loader。
1 | yarn add mini-css-extract-plugin -D |
1 | let htmlWebpackPlugin = require('html-webpack-plugin') |
给样式添加后缀:autoprefixer, postcss-loader
1 | yarn add autoprefixer postcss-loader -D |
1 | let htmlWebpackPlugin = require('html-webpack-plugin') |
还需要配置 postcss-loader 使用 autoprefixer 插件
根目录新增 postcss.config.js
1 | module.exports = { |
css 压缩:optimize-css-assets-webpack-plugin
js 压缩:uglifyjs-webpack-plugin
1 | yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D |
1 | let htmlWebpackPlugin = require('html-webpack-plugin') |
es高级语法降级处理
babel 三件套
babel-loader 转化源文件
@babel/core 核心模块有转化方法
@babel/preset-env 转化模块,es6->es5
@babel/plugin-proposal-class-properties 兼容es高级class语法
@babel/plugin-proposal-decorators 兼容装饰器语法
1 | yarn add babel-loader @babel/core @babel/preset-env -D |
1 | let htmlWebpackPlugin = require('html-webpack-plugin') |
处理js语法及校验
生成器,promise 等一些内置方法,可能需要额外配置
@babel/plugin-transform-runtime
@babel-polyfill 兼容更高es语法,
1 | // 生产开发都需要 |
1 | // "./app/js" 为js 入口 |
js语法校验: eslint
官网可视化配置,配置完后可直接下载配置文件 .eslintrc.json
1 | let htmlWebpackPlugin = require('html-webpack-plugin') |
引入全局变量
例如:将 jQuery 暴露到全局
在代码中通过内联loader 将 jQuery 以 $ 暴露到 全局
1 | import $ from 'expose-loader?$!jquery' |
在配置项中引入,这样
1 | module.exports = { |
每个模块自动注入$
1 | let webpack = require('webpack') |
还可以在index.html 模板 用 script 标签引用 jquery CDN
通过MDN引入的依赖,需要设置不需要打包选项
通过 externals 使webpack 不处理某些依赖库
1 | module.exports = { |
图片处理
图片的引入方式
1、在 js 中创建 图片引入
2、在css引入 background(‘url’)
3、
1 | import url from './logo.png' |
使用 file-loader 处理
file-loader 默认在内部生成一张图片到 build 目录,把生成图片的名字返回来
background 中的 图片路径 css-loader 回去处理
1 | yarn add file-loader -D |
1 | module.exports = { |
处理页面 img 标签中的 图片 url
1 | yarn add html-withimg-loader -D |
1 | module.exports = { |
url-loader
url-loader 内部实现了 file-loader. 一般代替file-loader处理图片,将体积小的图片转成base64位,减少请求次数.
体积大的图片再用file-loader 处理
1 | module.exports = { |
打包文件分类
就是将打包的文件放置指定的文件,使打包文件具有层次
1 | module.exports = { |
多页应用打包
多入口,多出口. webpack 会打包多个入口js.
多个html 模板, 需要借助 html-webpack-plugin 插件
1 | let path = require('path') |
配置 source-map
1 | let path = require('path') |
webpack 实时打包
代码修改已保存就更新页面
1 | module.exports = { |
webpack 小插件
实用常用的插件
cleanWebpackPlugin
每次打包时清除上次的dist目录
1
yarn add clean-webpack-plugin -D
1
2
3
4
5
6
7
8const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
...,
plugins: [
// 每次打包 清除 dist 文件夹
new CleanWebpackPlugin('./dist')
]
}copyWebpackPlugin
可以将指定文件或文件夹复制到指定文件
1
yarn add copy-webpack-plugin -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14const copyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
...,
plugins: [
// 每次打包 复制 文件/夹 到指定目录。可指定多个动作
new copyWebpackPlugin([
{
from: './doc',
to: './dist'
}
])
]
}bannerPlugin(wenpack内置)
版权声明,打包后的文件最顶端显示版权声明注释
1
2
3
4
5
6
7
8const webpack = require('webpack')
module.exports = {
...,
plugins: [
new webpack.bannerPlugin('make on 2022 by xxx')
]
}
webpack 跨域配置
前端开发测试时可配置 proxy 解决跨域问题
1 | // 比如 页面服务是 localhost 8080, 接口服务localhost 3000 |
resolve 解析
对第三方模块的优化处理
1 | module.exports = { |
注入环境变量区分 开发环境
1 | const webpack = require('webpack') |
优化项
noParse 不解析某些包
我们在 require 某个依赖时,webpack 默认会去解析这个依赖是否还依赖其他包,有的话就一起打包
noParse 则可设置不去检查这个依赖了
1 | module.exports = { |
排除,忽略某些文件
在进行某个规则可具体优化。
在引用momentjs 实践处理库时,moment 默认引入了所有语言包,导致文件打包很大,可以设置忽略语言包
1 | // 设置语言包忽略后,如果要设置中文,需要手动引入中文包 |
动态链接库
开发中,有些不会变的模块可以提前打包成库,后边直接使用打包好的库。不需要每次都打包,下次打包体积就变小了
例如:react, react-dom 模块
新增打包配置文件 webpack-config.react.js
1 | let path = require('path') |
webpack.config.js 配置引用
1 | let path = require('path') |
在index.html 中 使用打包好的库
1 | <script src="/_dll_react.js" ></script> |
多线程打包 进程
使用 第三方模块 happypack, 项目体积大的时候会使打包速度变快
1 | let path = require('path') |
webpack 自带的优化
tree-shaking
生产环境下打包会去除没用的代码, 但只对 import 语法有效。通过 require 方式引入的模块不会优化
scope hosting
作用域提升
1 | let a = 1; |
抽离公共代码
多入口环境下才能配置
页面 都引用了 a/b.js. 所以缓存 a/b.js
1 | let path = require('path') |
webpack懒加载
es6 草案语法 , 不管是 vue,还是react 都是靠这个语法实现的懒加载
1 | import('/xxx.js').then(data=> {}) |
webpack热更新
1 | module.exports = { |
监听data模块变化
1 | import str from './data'; |
图片压缩方案
vue-cli 项目中 vue.config.js
1 | const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); |
- 本文作者: 王不留行
- 本文链接: https://wyf195075595.github.io/2022/06/17/programming/构建工具/webpack4.x/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!