接上一篇继续回顾一下webpack处理非js文件的相关配置,这就需要使用到loader加载器了
- 处理less文件
- 在src文件夹下面创建一个css文件夹,再创建index.less文件,并写入一些样式
因为我下了Easy Less的插件,所以在写好保存之后会自动生成一个转换成对应css的文件:ul { li { font-size: 40px; } }
- 在index.js里面引入less文件
import './css/index.less'
- 将index.html引入的js文件替换成引入dist文件夹下的bundle.js
<script src="../dist/bundle.js"></script>
- 安装 npm i style-loader css-loader less-loader -D
- 在webpack.config.js里进行配置
module: {
rules: [
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
],
},
提取css文件的话和less的一样,只是不用下载less-loader,配置项也不用less-loader。
因为use执行顺序是从右到左,所以后写css-loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
在终端中执行“npm run build”,再次打开index.html页面字体效果有了:
-
处理字体图标
2.1 在src文件夹下面创建文件夹iconfont,复制进去下好的字体图标文件:
2.2 在index.html文件中使用字体图标
–index.html<i class="iconfont icon-zan"></i>
2.3在index.js中引入字体图标的css文件
import './iconfont/iconfont.css'
此时运行html结构同样是会报错的,因为浏览器不能够识别es6中新语法import
2.4 配置字体图标,打包。注意:字体图标使用到css文件,所以也要进行css文件的配置
–webpack.config.js//处理字体图标 { test: /\.(eot|svg|ttf|woff)$/, use: 'url-loader', }, //处理css文件 { test: /\.css$/, use: ['style-loader', 'css-loader'], },
2.5 在终端中执行命令“npm run build”,打包成功后打开dist下的页面就可以看见使用的字体图标。
-
处理图片
注意啦!!!图片的处理有分3种情况,这篇文章里面只是处理在html页面种使用了图片的情况哦3.1 在src文件夹下创建images文件夹并放入一张图片(建议图片不要太大以)
3.2 在html结构中使用图片
–index.html<div><img src="./images/1.png" alt=""></div>
提取图片要用到url-loader或者file-loader,先安装/下载 "npm i url-loader file-loader -D" 这里先说一下url-loader和file-loader的区别: 1. url-loader是将图片转换成base64格式的字符串,它可以直接嵌入页面中或者css中,这样就减少了一次http请求。但是不好的地方是这个字符串会增大文件的体积,这个转换的base64格式非常之长。。。文件体积增大也就i意味着CRP(Critical Rendering Path)关键路径渲染阻塞,可能会导致页面长时间空白 2. file-loader是单独生成了一张图片并另外命了名,它不会打包到bundle.js文件中。但是多了一张图片意味着多了一次http请求。 那么,我们应该要怎么选择是否用url-loader还是file-loader呢,通过判断图片文件的大小来决定,图片小的话我们就使用url-loader,减少http的请求。大图的话就使用file-loader,毕竟图片比较大 多一次http请求的话就多把。 在提取图片的配置中有个option可选的参数,里面有个属性limit可以限制图片的大小,我们设置根据需求设置一个大小,在这个大小范围内都默认使用url-loader,当检测到图片超过这个大小了会自动给我们转换成使用file-loader。
3.3 下载/安装html-withimg-loader,在终端中执行npm命令“npm i html-withimg-loader”。
ps:处理html中的图片必须有这个配置项!!
3.4 在webpack.config.js文件中配置图片//处理html中嵌入的图片 { test: /\.html$/, use: [ { loader: 'html-withimg-loader', }, ], }, //处理图片 { test: /\.(png|jpg|jpeg|gif)$/, use: [ { //默认是使用url-loader loader: 'url-loader', options: { //图片大小超过该大小就会自动使用file-loader limit: 80 * 1024, //设置图片命名和后缀都为原图的 name: '[name].[ext]', //图片打包到的文件夹(当文件大小小于limit的时候使用的是base64格式的字符串不会创建该文件夹) outputPath: 'images', //dist目录之后上面新建的文件夹的相对路径 publicPath: './images', //不使用es6中通用的模块化规范(这个必须写!!!) esModule: false, }, }, ], },
3.5 在终端中执行命令“npm run build”,再运行dist下的html文件,效果如下:
yes,不容易啊,打包处理的大概都复习了一遍了,处理图片这个还是优秀的同学研究出来教我哒,很棒 下一次我应该要学会自己处理更多问题,加油!!!
下面放一下在这个过程中所有的源码吧
–index.html
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
</ul>
<!-- 使用图片 -->
<div><img src="./images/1.png" alt="" /></div>
<!-- 使用字体图标-->
<i class="iconfont icon-zan"></i>
<!-- 引入jquery文件,后来被在index.js中的es6语法import取代了 -->
<!-- <script src="../node_modules/jquery/dist/jquery.js"></script> -->
<!-- 引入index.js文件,后面用bundle.js取代了 -->
<!-- <script src="./index.js"></script> -->
<!-- 引入dist文件下打包好的bundle.js文件 -->
<script src="../dist/bundle.js"></script>
–index.js
//导入jquery包
import $ from 'jquery'
//导入less文件
import './css/index.less'
//导入iconfont字体图标的css文件
import './iconfont/iconfont.css'
//li标签隔行变色
$('li:odd').css('color', 'pink')
$('li:even').css('color', 'red')
–webpack.config.js
//webpack是基于node的,所以在配置的过程中可以使用node的语法
//添加配置
//引入path
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//入口
entry: path.join(__dirname, './src/index.js'),
//出口
output: {
//目录
path: path.join(__dirname, './dist'),
//文件名
filename: 'bundle.js',
},
//发布模式(会压缩代码)
mode: 'development',
plugins: [
//使用插件,指定模板
new HtmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
}),
],
module: {
rules: [
//处理less文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
//处理css文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
//处理图片文件
{
test: /\.(png|jpeg|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 80 * 1024,
//设置文件名和后缀都和源文件一致
name: '[name].[ext]',
//提取文件到的文件夹(没有的话会自动新建一个)
outputPath: 'images/',
//dist目录之后该新建的文件夹的相对路径
publicPath: './images',
//不使用es6中通用的模块化规范
esModule: false,
},
},
],
},
//处理html中嵌入的图片
{
test: /\.html$/,
use: [
{
loader: 'html-withimg-loader',
},
],
},
//处理字体图标
{
test: /\.(eot|svg|ttf|woff)$/,
use: 'url-loader',
},
],
},
}
依赖的包:
如果有需要源文件的童鞋可以留言呀,如果能够帮助到你们,我很乐意分享出来哒~~~~~
你们以为webpack这就结束了吗,等着我的下一篇博客吧!!!!