上回说到webpack上手,今天我们简单聊一聊webpack开发环境配置
基于https://gitee.com/itxing666/webpackDemo feature/p01开发
打包Css文件资源
cd webpackDemo
mkdir src/css && cd src/css
touch index.css
在index.css中添加样式并在index.js
中引入
import './css/index.css'
这时npm run server
会报错,因为webpack本身只能处理js/json文件,但是不能处理img/css文件
ERROR in ./src/index.js
Module not found: Error: Can’t resolve ‘css/index.css’
五大核心之一的Loader可以对不同文件格式进行特定处理
npm i style-loader css-loader -D
webpack.config.js中Loader配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
use数组的执行顺序从右向左或者从下向上执行
**less怎么处理呢?**我们需要下载less-loader
npm i less-loader -D
在src/css
中创建index.less
并添加样式,index.js
中引入
配置webpack.config.js
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
less-loader的作用就是将less文件转换为css文件
打包Html资源
npm i html-webpack-plugin -D
在src
创建index.html, webpack.config.js中plugins配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
复制 ./src/index.html
文件,并自动引入打包输出的所有资源(js/css)
打包图片资源
首先创建src/images
目录,在该目录下引入图片资源logo.png
// index.html
<div class="logo"></div>
// css/index.less
body {
font-size: 20px;
color: red;
.logo {
width: 100px;
height: 100px;
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
这时终端会报错,因为我们还没有对image资源进行处理
npm i file-loader url-loader -D
webpack.config.js中loader配置
{
// url-loader依赖于file-loader
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10 * 1024,
outputPath: 'images/',
// [hash:10]取图片的hash的前10位
// [ext]取文件原来的扩展名
name: '[hash:10].[ext]'
}
}
]
},
1.url-loader依赖于file-loader,需要安装file-loader url-loader
2.limit: 图片大小小于limit,就会被base64处理,写入js
优点:减少请求数量(减轻服务器压力)
缺点:图片体积更大(文件请求速度更慢)
打包后效果:
<img src="images/bc3a1a29e3.png" alt="">
html中的图片怎么处理?
npm i html-loader -D
在src/index.html
中引入img标签
<img class="logo" src="./images/logo.png" alt="logo.png">
webpack.config.js中loader配置
{
test: /\.(html|html)$/,
use: ['html-loader']
},
打包其他资源
有时项目中要引入图标/字体等,以图标为例
首先在阿里图标库下载图标,放入src/font
中
// index.html
<span class="iconfont icon-icon-test"></span>
<span class="iconfont icon-icon-test1"></span>
<span class="iconfont icon-icon-test2"></span>
<span class="iconfont icon-icon-test3"></span>
引入样式
// index.js
import './css/iconfont.css'
webpack.config.js中loader配置
{
// 或者用exclude include
// test: /\.*$/,
// 或 exclude: /\.(css|js|html|png)$/
include: path.resolve(__dirname, "src/font"),
use: [{
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'font/',
}
}]
}
源码查看:https://gitee.com/itxing666/webpackDemo feature/p02