webpack ：
- output属性简单来说，就是用来设置打包后的文件位置
- loaders：webpack 中非常核心的内容之一，前面我们说的非 js 类型的模块处理就靠它了，不同类型的模块的解析就是依赖不同的 loader 来实现的
output：
先看配置代码
const path = require('path') //获取当前目录的绝对位置
//配置文件
module.exports={
mode:'production',
//一个打包文件
entry: './src/b.js',
//多个打包文件
// entry:{
// "index":'./src/a.js',
// "list":'./src/b.js',
// },
output: {
// //dist是你打包后放入的文件名(如果没有这个名字的话就会创建一个出来，
// 如果有就正常往进加) 默认是dist
// //__dirname是找到当前目录下 他是一个String 所以他也可以拼接
// eg：__dirname+"src" ，那么就会在src文件夹中创建一个dist文件夹
// //指定打包后文件的位置或者修改文件名字
// // 注意：path的路径必须是绝对路径
path:path.resolve(__dirname,'dist'),
// filename: "bundle.js",filename: "[name].js"这是两种写法
// 一个打包文件的时候用这个
filename: "bundle.js",
// //多个打包文件的时候用这个，
// filename: "[name].js"
// //name是占位符，不会生成一个name的js文件
},
}
下面来看图文解释：
loaders
使用思路：
当 webpack 碰到不识别的模块的时候，
webpack 会在配置的 module 中进行该文件解析规则的查找
rules 就是我们为不同类型的文件定义的解析规则对应的 loader，它是一个数组
每一种类型规则通过 test 选项来定义，通过正则进行匹配
通常我们会通过正则的方式来匹配文件后缀类型
use 针对匹配到文件类型，调用对应的 loader 进行处理
不同的loader有不同的作用 ：
- raw-loader ：的作用就是用来处理纯文本内容 （txt，md（markdown））
- file-loader：把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)（也就是打包图片）
- url-loader：可以处理理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对⼩体积的图片⽐较合适，⼤图⽚不合适。
- css-loader：分析 css 模块之间的关系，并合成⼀个 css
- style-loader：把 css-loader 生成的内容，用 style 标签挂载到⻚面的 head 中
raw-loader ：（打包文档之类的文件）
打包txt文档
先看需需要用到的文件
从上图中可以看出需要创建一个aa.txt 文档做测试 ，
在aa文档中直接写一下汉字做测试即可
然后再b.js中引入aa.txt文档
注意：在webpack.config.js中配置之前需要先安装raw-loader
命令： npm install --save-dev raw-loader
从下图可以看出安装完之后就可以在package.json文件中看到 “raw-loader”: “^4.0.2”,
“^4.0.2”,是你安装的版本
安装完之后就去webpack.conffig.js中去配置
module:{
rules:[
{
//当文件后缀是txt格式的时候 （正则判断）
test:/\.txt$/,
use:{
//使用什么类型的
loader:'raw-loader'
}
}
]
}
这步完成后就可以打包了 然后再index.html中引入打包好的压缩文件 输出
就会把aa.txt中的文字输出出来
index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./dist/bundle.js"></script>
</head>
<body>
</body>
</html>
打包md文档的
先下安装一个markdown-loader
命令：npm install markdown-loader
-
打包md的语法跟txt基本是一致的，不同的地方就是他还需要一个html-loader
-
html-loader 他是转化为html格式 既然要用到那就得去安装html-loader
安装命令：npm install --save-dev html-loader@1.1.0跟上边一样安装完后去package.json文件中查看一下看有没有
-
上面的都安装完成之后就可以在webpack.conffig.js中去配置
module:{
rules:[
{
//当文件后缀是txt格式的时候
test:/\.md$/,
//执行多个loader时 他是从后往前执行的
// 下面这个一上来就md格式的 然后转为html格式
use: ['html-loader','markdown-loader']
},
]
}
配置完大包后你可以看出他是以字符串的形式打印出来的 ，
所以你要在入口文件（我这里是b.js是入口文件）中去转换一下
import mdd from '../dist/ab.md'
console.log(mdd);
//转换
document.body.innerHTML = mdd
完了之后打包下就能在页面上看到md里面写的内容了
file-loader（打包图片）
先安装file-loader
命令：npm install --save-dev file-loader
安装上之后去package.json文件中查看一下看有没有
有的话 就看下图
上图的步骤做完后就去webpack.conffig.js中配置
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "file-loader",
options: {
//[name] [path] [ext]统一都是占位符
//[path] ：路径
//[name] ：文件名字
//[ext] ：后缀
//不配置可以不写 知道有这个东西就行
// name: "[path][name].[ext]",
//打包后的存放位置 （写上他 打包后就会在dist文件夹中自动创建一个images文件夹）
outputPath: "./images",
// 打包后文件的 url （就会把打包后的图片放到images文件夹中）
publicPath: './dist/images',
}
}
}
打包图片就完成了
url-loader （打包图片）
先安装
命令：npm install --save-dev url-loader
安装上，去package.json文件中检查一下有没有
有的话就步骤更file-loader是一样的 ，不一样的是webpack.conffig.js中的配置
{
test: /\.(png|jpe?g|gif)$/i,
use: {
loader: "url-loader",
options: {
outputPath: "./images",
publicPath: './dist/images',
//小于100的字节转成base64格式（就是转换为字符串）
limit:10000000
}
}
}
还有一个关注点 看下图：
注意：url-loader和file-loader的区别 在与url-loader可以选择性的把小型图片转换为字符串，对大图片不合适
css-loader （打包css）
先安装
命令 ：npm install css-loader
安装上,去package.json文件中检查一下有没有
有的话就随便找一个地方创建一个css文件 然后引入你创建的哪个css
再去webpack.conffig.js中配置
看下图 进行理解
通过上图你会发现这写步骤跟前面的使用思路是一摸一样的
再看webpack.conffig.js 中的配置
{
test:/\.css$/,
use:'css-loader'
}
这样打包下来你会发现cs输出出来是一个数组 （下图：）
通过这个输出结果你可以在入口文件中打印
import cs from './cs.css'
console.log(cs[0][1]);
然后打印结果是 （下图）
现在你就会发现css中设置的效果没有上去
你就还得在入口文件中把这个数组里面的东西追加到页面中
import cs from './cs.css'
console.log(cs[0][1]);
let sty =document.createElement("style")
sty.innerHTML=cs[0][1]
document.head.appendChild(sty)
这样你的样式就会加到页面中
这样写 你会不会觉得很麻烦，
webpack中还提供了一种简单的写法 style-loader
style-loader ：把 css-loader 生成的内容，用 style 标签挂载到⻚面的 head 中
他直接安装然后在webpack.config.js中配置就可以使用了
安装命令： npm install style-loader
webpack.config.js文件中的配置
{
test:/\.css$/,
use:['style-loader','css-loader']
}
这样就可以使用了 是不是比上面那部分用这简单呢
总结：
-
output ：就是用来手动设置打包后的文件位置
-
loaders ：可以理解为一个打包方案，
因为webpack本身对于一些文件是不知道该怎么处理的
而loader知道所以如果想要打包其他文件
就可以去使用配置loader进行打包 -
然而不同的loader有不同的作用 ：
- raw-loader ：的作用就是用来处理纯文本内容 （txt，md（markdown））
- file-loader：把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)（也就是打包图片）
- url-loader：可以处理理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对⼩体积的图片⽐较合适，⼤图⽚不合适。
- css-loader：分析 css 模块之间的关系，并合成⼀个 css
- style-loader：把 css-loader 生成的内容，用 style 标签挂载到⻚面的 head 中
扫一扫
2471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
