1.局部webpack打包
进入指定文件夹的目录下运行webpack命令
2.配置webpack打包入口文件名称
npx webpack --entry ./src/main.js
3.指定输入目录
22/06/16新增:
1.在output中的path指定的目录是所有文件的输出路径
2. filename可以指定对应的js输出
3. 
3.1方法一
npx webpack --entry ./src/main.js --output-path ./build
3.2方法二
package.json文件中，进行配置
3.3方法三
新增文件webpack.config.js文件
融入入口以及输出
package.json文件中，将上面的build修改
我们在这里使用npm run build，显示抛出错误
错误原因是：
output的路径需要使用绝对路径
但是entry入口是可以相对路径
修改为：
4.css-loader
css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
先安装 css-loader
npm install --save-dev css-loader
在配置文件中
module:{
rules:[ //多个属性划键值对
{
test:/\.css$/,
//前面的第一个\是转义，后面$判断是css结尾
use:[
{
loader:'csss-loader',
}
]
}
//上面可以简化成：
{
test:/\.css$/,
loader:'css-loader'
},
//还可以这样
{
test:/\.css$/,
use:['css-loader']
},
]
}
4.style-loader
推荐将 style-loader 与 css-loader 一起使用，直接在use数组后面添加
use:['css-loader','style-loader']
提示错误
查看login.css
文件内容为
.title{
color:red;
}
错误原因：
目前写的顺序会首先被style-loader处理，然后处理的结果传递给css-loader
如果换行书写
use:[
'css-loader','style-loader']
执行顺序从下往上执行，默认，从右往左，从下往上
现在期望
先用css-loader处理css 之后结果被style-loader处理
因此调换顺序
use:['style-loader','css-loader']
style-loader会在当前页面生成style标签
5.less-loader
webpack 将 Less 编译为 CSS 的 loader。
编写一个less文件
@bgColor:seagreen;
@fontSize:100px;
.title{
font-size:@fontSize;
color:@bgColor;
}
直接build,提示需要loader
安装less
npm i less -D
使用命令，对代码进行转义
npx less ./src/css/login.less
对文件进行重命名
npx less ./src/css/login.less index.css
rules中新增
{
test:/\.css$/,
use:['style-loader','css-loader','less-loader']
},
执行顺序是less转为css,css通过css-loader 再通过style-loader
6.browserslitrc工作流程
1.工程化
2.处理兼容：css js 兼容浏览器平台
3.如何实现兼容
4.兼容哪些平台
可以查找 查看市场占有率
caniuse.com–>Browser usafe table
这个工具会往上面的网站上去请求一份数据，返回的满足条件的平台
我们对其进行一下测试
mac电脑后面可加条件，后面引号是条件，查找市场占有率大于百分之一或者是某一个平台的最新版本
npx browserslist '>1%, last 2 version'
直接运行,返回默认的平台
npx browserlist
查询常用条件
default :>0.5%
dead:统计24个月之内被废弃的
last 2 version:浏览器最新的两个版本
因此我们对其做相关的配置
方法一：修改package.json文件，添加以下代码
"browserslist":[
">1%", //兼容时长占用率大于1%的平台
"last 2 version", //最新的2个版本
"not dead"
]
方法二：
创建文件夹与src同级，名称：.browerslistrc文件
文件内容
这里可以用换行，也可以使用and连接
> 1%
last 2 version
not dead
7.postcss工作流程
1.postcss是什么
javascript 转换样式的工具
可以自己利用postcss将文件转换成为css-loader
2. less(less-loader)–>css–>css-loader
安装
nom i postcss -D
postcss不能像browserslist那样直接在命令行去使用，必须安装另外一个依赖
npx i postcss-cli -D
//这个命令行是为了在终端使用postcss的局部命令
参考网站：
autoprefixer.github.io
会展示针对不同的平台，对css进行浏览器前缀处理
这里上方注释是使用了三个插件
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6, //postcss
* Autoprefixer: v10.3.1 //autoprefixer
* Browsers: last 4 version //browsers
*/
新建一个文件进行测试
新建test.css 复制官方示例 添加到dom中，发现效果没有生效
处理办法：
执行 结果输入（-o）到ret.css
npx postcss -o ret.css ./src/css/test.css
(执行这个是在安装了npx i postcss-cli -D的基础上)
运行之后产出文件 ret.css
文件内容：发现这里并没有改变
如果我们需要他做具体的事情，应该将相应的插件安装好，我们这里想要
根据我们browserslistrc的配置去添加不同浏览器他应该具备的前缀
这里我们没有加前缀的插件，因此安装插件
安装为开发依赖：
插件功能：对属性进行前缀增加
npm i autoprefixer -D
指定文件使用
npx postcss --use autoprefixer -o ret.css ./src/css/test.css
再次查看test.css,发现已经添加前缀
8.postcss-loader处理兼容
安装
npm i postcss-loader -D
在webpack配置文件中
1.分析运行机制
postcss 在 css-loader 之前进行工作
css
css-loader
style-loader
{
test:/\.css$/,
use:['style-loader','css-loader','postcss-loader']
},
再次运行，发现依旧没有效果，原因是postcss工作流程之中，postcss-loader
内部之中使用了，但是他什么也做不了，但是需要设置相应的插件
修改配置代码：
{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
//因为需要特殊配置，以对象的形式写键值对
{
loader:'postcss-loader',
//具体的参数
options:{
postcsssOptions:{
//加载的插件
plugins:[
require('autoprefixer')
]
}
}
}
]
},
9.postcss-preset-env
示例使用：
现在设置颜色的color，有十六进制，比如#12456，也可以使用#12345678.
后面两位78指的是rgba中的透明度，为了在其他浏览器中兼容适配新的语法
preset-env：预设，不同插件集合 默认集合很多css的插件
安装
npm i postcss-preset-env -D
回到webpack配置文件中
{
loader:'postcss-loader',
//具体的参数
options:{
postcsssOptions:{
//加载的插件
plugins:[
require('autoprefixer'),
require('postcss-preset-env')
]
}
}
}
查看效果：
未使用之前
使用后
引用也可以直接设置预设，因为是集合，包含了autoprefixer
plugins:['postcss-preset-env']
在这里，如果我们less的文件配置也需要这些，那么webpack的配置文件中会
再次产生一次相同的配置，显得代码十分的冗余
因此我们可以剥离相关的插件配置，下次可以直接在公共的位置进行管理
创建文件
postcss.config.js //文件名不能修改，默认会找该文件名的文件
文件内容：
module.exports={
plugins;[
require('postcss-preset-env')
]
}
其中webpack配置文件中
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
}
10.importLoaders属性
预设条件:创设login.css和test.css
login.css：
@import './test.css';
.title{
color:#12345678;
}
test.css
.title{
transition:all 0.5s;
user-select:none
}
这里我们在test.css中设置了相关样式，我们希望这个能正常打包，并且能做兼容性处理
直接打包发现，并没有对起进行处理
这里没有改变的原因是：
以css为例分析流程
- login.csss 中@import 语句导入了test.css
- login.css 可以被匹配到，当它被匹配到之后，就是postcss-loader进行工作
- 基于当前的代码，postcss-loader拿到了login.css当中的代码之后，进行分析，基于我们的筛选条件并不需要做额外的处理
- 最终将代码直接交给了css-loader
- 此时，css-loader是可以处理@import media url…，这时，它又拿到了一个test.css文件，但是loader并不会往回走，就是及时发现了需要做出来了，但是因为loader不会往会找，所以css-loader会硬着处理
- 最终将处理好的css代码交给style-loader进行展示
- 因此看到的结果就是没有被处理
因此引入importLoaders的属性
{
test:/\.less$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
//这个数值1表示，如果遇到； 需要解析的，往前找一个
//如果改为0，表示及时找到了，也不用其他的，就用css-loader处理
//如果现在新增了postcss-loader后新增一个loader,那css-loader如果需要使用postcss-loader以及other-loader
//那么这里的数值改为2
importLoaders：1
}
}
'postcss-loader',
//测试数值新增一个loader
'other-loader'
]
}
再次运行，能正常解析
11.file-loader处理图片
需求：让webpack打包图片
新建 image.js
内容：
function packImg(){
//01 创建一个容器
const oEle = document.createElement('div')
return oEle
}
document.body.appendChild(packImg())
在入口的index.js文件中导入
import './js/Image
运行
查看新增的dom显示出来了
创建img标签
function packImg(){
//01 创建一个容器
const oEle = document.createElement('div')
//02 创建img标签 设置src属性
const oImg = document.createElement('img')
//这里src要当模块使用，因此应该想到require
oImg.src=require('../img/01.wb.png')
oEle.appendChild(oImg)
return oEle
}
再次运行，抛错，错误信息：说确实合适的loader去处理
安装
npm i file-loader -D
去webpack新增规则
**方法一**
{
test:/\.(png|svg|gif|jpe?g)$/, //这些格式的文件，其中jpe?g表示0个e或者1个e
use:['file-loader'],
}
再次运行（这里是因为webpack5所以有这个影响）
发现呈现的img中的src标签是[object Module]
在webpack4中
oImg.src=require('../img/01.wb.png')
这行代码会直接返回当前文件的路径，字符串，然后可以直接使用
在webpack5中
上面的代码返回的是
{default：xxx}
因此这里需要修改为
oImg.src=require('../img/01.wb.png') .default
方法二：
但是也有不写default的方法，需要给file-loader传递参数
{
test:/\.(png|svg|gif|jpe?g)$/, //这些格式的文件，其中jpe?g表示0个e或者1个e
use:[
{
loader:'file-loader',
options:{
esModule:false //不转为esmodule
}
}
]
}
方法三：
再次运行依旧能成功显示图片
使用背景图片
css目录下新增一个img.css
在Image.js引入背景图片css
import '../css/img.css'
再次运行
dist目录生成了三张图片，多出了一个中间的文件，中间的文件又导出的我想用的那个文件的导出操作
加载好之后发现背景图没有设置成功，查看
点击查看
这个图片是中间那个文件，这个文件里面导出的才是我想要的。
分析原因：
我们在这里是有一个元素，有一个类,bgBox，这里有个背景图的url,他什么时候会被处理呢，我在 index.js中,引入了image.js，image.js引入了img.css，css-loader会把css-loader转换成require语法
require默认会导出esModule，因此我们应该在使用css-loader设置参数
{
test:/\.less$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders：1,
esModule:false
}
}
'postcss-loader',
]
}
再次运行，能够正常使用了
只打包出来了两张图片
如果出现浏览器提示Automatic publicPath is not supported in this browser
output: {
publicPath: /build/,
filename: build.js,
path: path.resolve(__dirname, build) // 必须是绝对路径
},
总结：
-
img src
— 使用 require 导入图片，此时如果不配置esModule:fasle,则需**.default**
— 也可以在配置当中设置 esModule:false
— 采用import xxx from 图片资源 ，此时可以直接使用 xxx -
background url
12.设置图片名称与输出tscproj
11里面产出的图片是一种以MD4的之中哈希值，我们可以自行配置
常见的占位符：
[ext]：拓展名
[name]:文件名
[hash]:占位，以文件内容以MD4的算法生成文件名
[contentHash]：webpack中contentHash和hash是一样的
[hash:]:限制文件名长度，可以控制显示几位
[path]：文件路径
{
test:/\.(png|svg|gif|jpe?g)$/,
use:[
{
loader:'file-loader',
options:{
name:'[name].[hash:6].[ext]'
}
}
]
}
再次运行
期望同样输出到指定目录
{
test:/\.(png|svg|gif|jpe?g)$/,
use:[
{
loader:'file-loader',
options:{
name:'[name].[hash:6].[ext]',
outputPath：'img' //指定目录
//这里可以简写
outputPath不写，将name改为：
name:'img/[name].[hash:6].[ext]',
}
}
]
}
再次运行，dist文件夹下面新增一个img目录，并且打包后的文件输出到了dist/img里面
14.url-loader处理图片
安装
npm i url-loader -D
webpack配置中
{
test:/\.(png|svg|gif|jpe?g)$/,
use:[
{
loader:'url-loader',
options:{
name:'[name].[hash:6].[ext]'
//文件大小限制,以25kb为分界线
limit:25*1024
}
}
]
}
打包运行，发现dist文件夹中并没有生成img文件夹，但是图片依旧可以正常显示
作用：将当前需要打包的图片资源，以base64去加载到代码中，好处：减少我们访问请求的次数，弊端会因为图片的大小加载请求时间变长。
- url-loader base64 uri 文件当中，减少请求次数
- file-loader 将资源拷贝到指定的目录，分开请求
- url-loader 内部其实也可以调动file-loader
- limit
-
--
根据文件大小限制，在上方代码添加limit属性，再次打包执行
15.asset module
资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
在 webpack 5 之前，通常使用：
- raw-loader 将文件导入为字符串
- url-loader 将文件作为 data URI 内联到 bundle 中
- file-loader 将文件发送到输出目录
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
- asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
- asset/inline导出一个资源的 data URI。之前通过使用 url-loader 实现。
- asset/source 导出资源的源代码。之前通过使用raw-loader 实现。
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用
url-loader，并且配置资源体积限制实现。
当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 ‘javascript/auto’ 来解决。
资源模块文档
1 asset 处理图片
1.1 asset/resource
{
test:/\.(png|svg|gif|jpe?g)$/,
type:'asset/resource' // 直接运行这个结果与file-loader没有配置路径是一个效果
}
我们可以配置路径，全局经过了asset配置的都放置在指定的目录之中
我们在配置的output的地方
output: {
publicPath: /build/,
filename: build.js,
path: path.resolve(__dirname, build) // 必须是绝对路径
assetModuleFilename:'img/[name].[hash:4].[ext]'
},
再次运行之后，发现后缀多一个点，因此需要去掉自己手动的点，这种配置类似于全局配置
assetModuleFilename:'img/[name].[hash:4][ext]'
我们也可以单独设置
{
test:/\.(png|svg|gif|jpe?g)$/,
type:'asset/resource' ,
generator:{
filename:'img/[name].[hash:4][ext]'
}
}
运行后效果：
1.2 asset/inline
{
test:/\.(png|svg|gif|jpe?g)$/,
type:'asset/inline' ,
}
执行，图片转成base64的uri
对图片做一个大小的阈值
{
test:/\.(png|svg|gif|jpe?g)$/,
type:'asset',
//1.以拷贝的形式写进磁盘目录
generator:{
filename:'img/[name].[hash:4][ext]'
}
//期望有data uri的形式
parser:{
dataUrlCondition:{
maxSize:30 *1024//最大阈值
}
}
}
再次运行
2.1 asset 处理图标字体
src中新建font目录,这里要注意css的导入路径问题，思想是直接作为静态资源拷贝出去
js中新建font组件
index.js中引入font组件
进入webpack.js的配置文件
{
test:/\.(ttf|woff2?)$/, // test:/\.(ttf|woff|woff2)$/前面是简写，
type:'asset/resource',//资源拷贝
generator:{
filename:'font/[name].[hash:3][ext]'
}
}
16.自动清除上次打包内容
module.exports = {
//...
output: {
clean: true, // 在生成文件之前清空 output 目录
},
};
17.代码分割操作
SplitChunksPlugin
最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。
从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks。
module.exports = {
//...
optimization: {
splitChunks: {
// include all types of chunks
chunks: 'all',
},
},
};
作用：
1.如果用到了node_modules代码，会打包成单独的js
2.动态导入的文件也会单独对包
18.统一命名规则
filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
扫一扫
1305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
