Loaders
网址:https://webpack.js.org/loaders/
介绍:
在实际项目中，不仅有js文件，还有css、图片、ES6转ES5、tpyescript转ES5，将less，scss转化css，将jsx、vue文件转换js文件这样就需要loader来解决
1.作用:为了解决除了js类型的(txt,md 之类的)
2.代码示意loader:
module:{
rules:[
{
test:/\.txt$/,
loader: 'raw-loader' //加载原始内容的loader
}
],
}
注意:webpack 碰到不识别的模块的时候，webpack 会在配置的 module 中进行该文件解析规则的查找
rules就是我们为不同类型的文件定义的解析规则对应的 loader，它是一个数组- 类型规则通过 test 选项来定义，通过正则匹配，通过正则的方式来匹配文件后缀类型
- use针对不同文件类型,调用对应的loader;
3.loader类型:
案例:
3-1 md类型
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>
</head>
<body>
<script src='./dist/main.js'></script>
</body>
</html>
src/data/haha.md
# 哈哈
javascript
python
php
css
ui
src/data/index.js
import haha from "./data/haha.md";
console.log(haha);
document.body.innerHTML='haha' //把内容输出到页面
console.log('哈哈哈哈');
1.安装mardown-loader html-loader
npm install markdown-loader
npm install --save-dev html-loader
2.配置 webpack.config.js
module:{
rules:[
{
test:/\.txt$/,
loader: 'raw-loader' //加载原始内容的loader
},
{
test:/\.md$/ , //正则判断是否是markdown
//执行多个loader,他执行顺序是从后往前解析
use:['html-loader','markdown-loader']
}
],
}
3.打包: ./node_modules/.bin/webpack
.txt类型:*
src/raw-loader.js
import aa from './data/a.txt';
import bb from './data/b.md';
console.log('aa: ', a); //报错
console.log('bb: ', b); //报错
webpack 会报错，因为 webpack 处理不了 txt 和 md 这样的非 js 的模块，可以通过loader来解决
解决txt类型:
3-2 raw-loader
1.先安装
npm install --save-dev raw-loader
2.然后在 webpack.config.js 中进行配置
module.exports = {
...,
module: {
rules: [
{
test: /\.txt$/, //正则验证是否是txt
loader: 'raw-loader' // 加载原始内容的loader
}
]
}
}
3.打包:./node_modules/.bin/webpack
3-3 file-loader(上传图片)
把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)
1.安装:
npm install --save-dev file-loader
2.然后在 webpack.config.js 中进行配置
rules: [
...,
{
test: /\.(png|jpe?g|gif)$/i,
use:{
loader:'file-loader',
options:{
//都是占位符
//'[path] : 路径
//[name] : 文件名
//.[ext] :后缀
name: "[path][name].[ext]",
//相对的是全局的outputPath
outputPath: "/image",
// 打包后文件的 url
publicPath: './dist',
}
}
}
]
3.index.js
import aa from "./data/a.png";
console.log(aa);
let img=new Image(); //定义一个标签
img.src=aa; //设置属性
document.body.appendChild(img) //追加到页面中
4.打包: ./node_modules/.bin/webpack
5.运行html文件
占位符网址：https://webpack.js.org/loaders/file-loader#placeholders
3-4 url-loader
可以处理理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对⼩体积的图片⽐较合适，⼤图⽚不合适。
1.安装:
npm install --save-dev url-loader
2.然后在 webpack.config.js 中进行配置
rules: [
...,
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称
// [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images"
// 打包后文件的 url
publicPath: './images',
// 小于 100 字节转成 base64 格式
limit: 10000
}
}
}
]
3.打包:./node_modules/.bin/webpack
注意:图片大于limit 设置的大小,就不会变成base64字符串,小于设置的大小就会在打包的文件中显示图片错误,变成字符串;如果变成字符串,图片就销毁了,想要再次使用必须把整个url-loader都注释;
3-5 css-loader
分析 css 模块之间的关系，并合成⼀个 css
1.安装:
npm install --save-dev css-loader
2.然后在 webpack.config.js 中进行配置:
rules: [
...,
{
test: /\.css$/,
use: {
loader: "css-loader",
options: {
// 启用/禁用 url() 处理 true 图片可以平铺 false就显示一张图
url: true,
// 启用/禁用 @import 处理
import: true,
// 启用/禁用 Sourcemap
sourceMap: false
}
}
]
3.在src/cs.css
body{
background:cyan;
}
4.index.js
import cs from "./cs.css";
console.log(cs[0][1]); //js文件写的内容 body{background:cyan}
let sty=document.createElement('style'); //创建style标签
sty.innerHTML=cs[0][1] //把输出的内容放到style中
document.head.appendChild(sty); ////添加到header中
5.打包:./node_modules/.bin/webpack
6.运行:html 背景变成cyan颜色;
3-6 style-loader
把 css-loader 生成的内容，用 style 标签挂载到⻚面的 head 中
1.安装:
npm install --save-dev style-loader
2.然后在 webpack.config.js 中进行配置:
rules: [
...,
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
3.cs.css
body{
background:cyan;
}
4.index.js
import cs from "./cs.css";
console.log(cs);
5.打包:./node_modules/.bin/webpack
6.运行: html 背景颜色变成cyan颜色
- use: [“style-loader”, “css-loader”]解析:
同一个任务的 loader 可以同时挂载多个，处理顺序为：从右到左，也就是先通过 css-loader 处理，然后把处理后的 css 字符串交给 style-loader 进行处理
代码示意:
rules: [
...,
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {}
},
'css-loader'
]
}
]
3-7 sass-loader
1.解释:1把 sass 语法转换成 css ，依赖 node-sass 模块
2安装:
npm install --save-dev sass-loader node-sass
3.在webpack.config.js在里配置:
module.exports = {
.............,
module:{
rules:[
{test:/\.scss/,
use:["style-loader","css-loader","sass-loader"]
}
]
}
}
4.打包:./node_modules/.bin/webpack
5.Plugins(插件)
解析plugins:
扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等里面有很多插件;
5-1 HtmlWebpackPlugin
1.解释:在打包后,会自动生成html文件,并且会把打包生成的js也引进去.
2.安装:
npm install --save-dev html-webpack-plugin
3.在webpack.config.js里面配置
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports={
...
//插件
plugins:[
new HtmlWebpackPlugin({
title:"my App",
filename: "app.html", //打包后的名字
template: "./public/index.html" //原文件的文件路径
})
]
}
- .public//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><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
</body>
</html>
5.打包: ./node_modules/.bin/webpack
6.运行 html文件
注意:在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值
5-2clean-webpack-plugin
1 .解释:每次打包前都把之前的内容删除了,只留当前刚打包的文件
2.安装:
npm install --save-dev clean-webpack-plugin
3.在webpack.config.js里面配置
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
output:{
path:path.resolve(__dirname,'dist'),
filename:"public/js/app.js"
},
moudle:{
reles:[
{
test: /\.(png|jpe?g|gif)$/i,
use:{
loader:'file-loader',
options:{
//都是占位符
//'[path] : 路径
//[name] : 文件名
//.[ext] :后缀
// name: "[path][name].[ext]",
//打包后的存放位置
//相对的是全局的outputPath
outputPath: "/public/image",
// 打包后文件的 url
publicPath: './public/image',
}
}
},
]
}
plugins:[
plugins:[
new HtmlWebpackPlugin({
title:"my App",
filename: "app.html", //打包后的名字
template: "./public/index.html" //原文件的文件路径
}),
new CleanWebpackPlugin(),
]
}
4.打包: ./node_modules/.bin/webpack
5.运行 html 效果:把压缩后的文件放在dist/public/index.html dist/public/js/index.js 把图片放在dist/public/image
5-3 mini-css-extract-plugin
1 提取 CSS 到一个单独的文件中
2 安装:
npm install --save-dev mini-css-extract-plugin
3 在webapck.config.js里配置:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
module:{
reles:[
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
}
],
//插件
plugins:[
new MiniCssExtractPlugin({
filename: 'public/css/app.css' //打包完在public/css/app.css
}),
]
}
}
4 cs.css
body{
background:cyan;
/* background:url('../src/data/a.png'); */
background:url('./data/a.png') 找到打包前图片的路径
}
5 打包: ./node_modules/.bin/webpack
6 运行:html
6.WebpackDevServer(热更新)
1.解释:每次代码写完都要重新打包,浪费时间,换需要多次刷新浏览器,可以通过安装webpackdevserver来解决;
2.安装:
npm install --save-dev webpack-dev-server
3.在package.json里配置:
"script":{
"server": "webpack serve --open"
}
4.在webpack.config.json配置
moudule.exports={
...
devServer: {
// 生成的虚拟目录路径
contentBase: "./dist",
openPage:'app.html',
//打开网站时所在的页面
index:'app.html',
// 自动开启浏览器
open: true,
// 端口
port: 8080
}
}
注意:config.json 文件修改之后需要重新启动项目,才会生效; openPage:‘app.html’,和index:‘app.html’, 任意写一个会自动下载一些小的东西所以最好两个一起用
在终端运行:npm run server 直接出现一个端口页面
7. Hot Module Replacement:
1.解释: 当代吗发生变化是,使用live reload 会刷新整个页面,这样会节省了手动刷新的时间,但是如果只刷新一部分内容,但是他整个页面都会重新刷新.Hot Module Replacement:的核心就是局部更新,不会全部刷新,只会改我们要改的地方;
2.webpack.config.json配置
module.exports = {
...,
devServer: {
// 生成的虚拟目录路径
contentBase: "./dist",
// 自动开启浏览器
open: true,
// 端口
port: 8081,
// 开启热更新
hot:true,
// 即使 HMR 不生效，也不去刷新整个页面(选择开启)
hotOnly:true,
proxy: {
'/api': {
target: 'http://localhost:8787'
}
}
}
3.运行: npm run server
注意当入口文件发生改变,整个热面不全部重新刷新,只会局部刷新,页面不会产生闪烁问题
总结:
我学到了loader是为了解析解决除了js其他类型的文件而出来的;
loader特别强大,只需要安装,配置,打包就可以解决;
还学习了插件,插件对前端的作用真的太大了,减轻了技术人员的压力;
414
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
