loader整体介绍
在webpack看来 一切皆模块,图片,样式文件,js文件… 。 但是webpack默认只能处理js模块,对于非js的内容,例如css, less文件,图片文件等等 它就需要一些帮手来处理了。这些帮手就是loader。
loader处理css文件
创建.css文件.先搭个简单架子
项目名
├── index.html
├── src
│ ├── css
│ │ ├── public.css
│ │ └── style.css
│ └── js
│ ├── main.js
│ ├── tool.js
│ └── tooles6.js
└── package.json
两个css文件里随便写点div样式,html里面写个div
style.css使用 @import “public.css” 引入public.css文件
算了我还是写一下简单点的代码吧
style.css内容:
@import "public.css";
div {
border:4px solid #ccc;
height: 200px;
margin:50px auto;
}
在.js中导入css
自已的main.js,在 src/js/main.js中,引入css
// nodejs中的模块化
const { updateDom } = require('./tool')
// es6中的模块化
import {log} from './tooles6'
//引入css文件
import '../css/style.css'
updateDom ('app','index.html')
log('test')
});
再次,打包代码,会报错,因为webpack解读不了css文件,需要导入loader来帮忙
安装并使用css-loader
安装
npm i css-loader -D
在配置文件中使用
修改webpack.config.js
文件,添加module
const path = require('path')
module.exports = {
mode: 'development',
entry:'./src/js/main.js',
output:{
path:path.resolve(__dirname, './build'),
filename:'bundle.js'
},
module:{
rules:[ // 规则
{
test: /\.css$/, // 正则测试
use: ['css-loader'] // loader
}
]
}
}
再次打包
它不会报错。但是,页面上也并没有出现样式的效果。打包之后的文件中并没有包含css代码。
css-loader只是能让你在.js中通过import来引入.css,如果你希望引入的css代码最终以style标签的方式插入到html页面中,则还需要安装一个loader:style-loader
安装
npm i style-loader -D
重新再配置一下
const path = require('path')
module.exports = {
mode: 'development',
entry:'./src/js/main.js',
output:{
publicPath:'https://www.baidu.com',
path:path.resolve(__dirname, './build'),
filename:'bundle.js'
},
module:{ // 处理非js模块
rules:[ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader','css-loader']// loader style-loader一定要写在前面
}
]
}
}
重点: 在有多个loader的情况下,use数组中的loader执行顺序是从右到左的过程
loader处理less文件
如果希望处理less文件,则还需要去安装额外的包。
在src目录的less目录下创建 index.less,
项目名
├── index.html
├── src
│ ├── less
│ │ └── index.less
│ ├── css
│ │ ├── public.css
│ │ └── style.css
│ └── js
│ ├── main.js
│ ├── tool.js
│ └── tooles6.js
└── package.json
随便写点内容:
@import "../css/style.css";
div {
color: red;
}
在.js中引用.less
在src/js/main.js文件中引入less,不要再js里直接引入css了
// nodejs中的模块化
const { updateDom } = require('./tool')
// es6中的模块化
import {log} from './tooles6'
//引入less文件
import '../less/index.less'
updateDom ('app','index.html')
log('test')
安装包
npm i less-loader less -D
这是两个包
- less 用来把less–>css
- less-loader用来加载less文件
配置模块
module.exports = {
// 非js模块,在这里处理
module: {
rules: [ // 规则
{
test: /\.css$/, // 正则匹配,以.css结尾的文件
use: ['style-loader','css-loader'] // 匹配成功,使用指定的loader
},
{
test: /\.less$/, // 正则匹配,以.less结尾的文件
use: ['style-loader','css-loader','less-loader'] // 匹配成功,使用指定的loader
}
]
}
}
图片的使用只要配置一下就可以,不用导包
module: {
rules: [
// ...省略其他
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
}
]
}
plugin整体说明
webpack中除了loader之外,还有一个核心概念:plugin,中文就是插件。它可以用来增强webpack的功能。
html-webpack-plugin
功能:把我们自已写的.html文件复制到指定打包出口目录下,并引入相关的资源代码。
下载安装
命令:npm i html-webpack-plugin -D
在webpack.config.js中,做两件事:
-
引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
-
添加一个plugins配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入nodejs中的核心模块
const path = require('path')
console.log(path.join(__dirname,'/build'))
module.exports = {
mode: "production",
entry: './src/js/main.js', // 入口文件
output: {
path: path.join(__dirname,'/build'),
filename: "bundle.js" // 设置出口文件的名字。默认情况下,它叫main.js
},
// 非js模块,在这里处理
module: {
rules: [ // 规则
{
test: /\.css$/, // 正则匹配,以.css结尾的文件
// 如果发现是.css文件,则由如下两个loader来处理
// 处理的顺序是 从右向左
// css-loader: 作用是允许.js中引入.css
// style-loader:作用是在.html上创建style标签,把css代码输入进去
use: ['style-loader','css-loader'] // 匹配成功,使用指定的loader
},
{
test: /\.less$/, // 正则匹配,以.less结尾的文件
// 如果发现是.less文件,则由如下三个loader来处理
// 处理的顺序是 从右向左
// less-loader: 作用是加载less文件,会帮你less转成css
// css-loader: 作用是允许.js中引入.css
// style-loader:作用是在.html上创建style标签,把css代码输入进去
// use: ['style-loader','css-loader','less-loader'] // 匹配成功,使用指定的loader
// MiniCssExtractPlugin.loader :把css放在文件中而不是style中
use: [{loader: MiniCssExtractPlugin.loader},'css-loader','less-loader']
},
{
test:/\.(png|svg)$/,// 正则匹配,以.png结尾的文件, 以.svg结尾的文件
// use:['url-loader'] // 匹配成功,使用指定的loader
use: [
{
loader:'url-loader',
options:{
limit: 3 * 1024 // 限制大小为3k
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({ // 打包输出HTML
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true// 压缩内联css
},
filename: 'index.html',
template: path.resolve('./index.html') // 指定模块的位置
})
]
}
- 打包测试
- 它会把template中指定的.html文件复制(压缩)到出口文件夹
- 还会自动附上打包之后.css和 .js代码
clean-webpack-plugin
在生成打包文件之前,把目录清空掉。
安装
npm i clean-webpack-plugin -D
修改配置文件webpack.config.js
1.引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
- 添加一个plugins配置
plugins:[
new CleanWebpackPlugin(),
其它...
]
webpack实时打包
工具:[webpack-dev-server]
注意
:
- 项目开发都是对src目录内部的文件进行更新,不要去修改dist打包好的文件
- 现在对src内部的任何文件做修改操作后,都需要重新打包,才可以看到对应效果
步骤
- 安装
npm i webpack-dev-server -D
- 在webpack.config.js中做如下配置\
module.exports = {
// 其他省略....
// 配置 webpack-dev-server的选项
devServer: {
host: '127.0.0.1', // 配置启动ip地址
port: 10088, // 配置端口
open: true // 配置是否自动打开浏览器
}
}
- 在package.json中补充一个script
"scripts": {
+ "dev": "webpack-dev-server",
// 它默认会找webpack.config.js文件
"build": "webpack-dev-server --config webpack.config.js"
// 指定使用webpack.config.js配置文件文件
},
- 启动命令
现在通过npm run dev
就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会自动打开一个浏览器窗口。 - 测试
-
- 修改.js代码,
- 修改.css代码,检查是否会重启注意:
浏览器看到的实时效果是服务器通过“内存
”提供的,没有物理文件,也不会生成dist目录