webpack打包工具的使用二

接上一篇继续回顾一下webpack处理非js文件的相关配置,这就需要使用到loader加载器了

处理less文件

在src文件夹下面创建一个css文件夹，再创建index.less文件，并写入一些样式
```
ul {
    li {
   	font-size: 40px;
   	}
}
```
因为我下了Easy Less的插件，所以在写好保存之后会自动生成一个转换成对应css的文件：
在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这就结束了吗，等着我的下一篇博客吧！！！！

webpack打包工具的使用二

接上一篇继续回顾一下webpack处理非js文件的相关配置,这就需要使用到loader加载器了

猜你喜欢