如何使用webpack打包资源

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第二天，点击查看活动详情。

日常开发中，webpack是前端开发工程师的必备技能，今天我就给大家介绍一下如何使用webpack来打包资源。

打包样式资源

首先看一下目录结构：

1. 在src中创建一个index.less文件，简单输入内容如下：

html,body{
  background-color: pink;
  text-align: center;
  margin:0;
  padding:0
}

2. 新建一个index.js文件导入样式：

import './index.less'

3. 配置webpack.config.js如下(配有注释)：

const {resolve} = require('path')

module.exports = {
//入口文件
  entry:'./src/index.js',
  //出口文件，即打包后存放的位置
  output:{
    filename:'built.js',
    //使用绝对路径
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.less$/,
        //需要提前手动安装需要的包
        use:['style-loader','css-loader','less-loader']
      }
    ]
  },
  //设置为开发模式，方便开发的时候进行调试
  mode:'development'
}

注意：loader的书写顺序不能变哦，loader的执行顺序是从右到左。

less-loader将less转为css，css-loader将css转为js资源，style-loader再把样式插入到html中的style中。

执行webpack然后就打包完成啦！如下：

可以看到样式内容被插入到了html中的style标签上：

打包html资源

注意打包html文件的话需要使用插件来打包，因此需要我们手动安装一下：npm i html-webpack-plugin -D

首先来介绍一下这个插件的作用：

• 默认在出口下创建一个html文件，然后导入所有的JS/CSS资源
• 我们也可以自己指定一个html文件，在此html文件中加入资源

我们在src下创建一个html指定在该html文件基础上打包：

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //...相同部分
  module:{
    rules:[]
  },
  plugins:[
    //默认创建一个html文件，然后引入所有的JS/CSS资源
    new HtmlWebpackPlugin({
      //可以自己指定一个html文件，在此html文件中引入资源
      template:'./src/index.html'
    })
  ],
  mode:'development'

}

打包图片资源

需要提前安装包 npm i url-loader file-loader html-loader -D

html-loader可以处理html中的img图片，可负责将其中的图片引入，然后交由url-loader进行解析，url-loader又是依赖于file-loader的。

出现问题：url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs。

解决：因此如果在html中的img标签直接引入图片的话，需要注意关闭url-loader的es6模块化，使用commonjs解析。 我们先看看在images下的两张图片及其大小：

一张73.5kb，一张6.28kb,我们通过把图片转化为base64的方式打包，那么base64有什么好处呢？

• 优点：减少请求数量，减轻服务器压力
• 缺点：图片体积会变大，导致文件请求速度变慢，因此体积过大的图片不适合转化为base64

这时候我们来配置webpack.config：

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...相同部分
  module:{
    rules:[
      {
        test:/\.(jpg|gif|png)$/,
        loader:'url-loader',
        options:{
          //图片小于8kb会被转化为base64
          limit:8*1024
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development'
}

注意： 使用一个loader的时候写法不一样，不需要写use,而是loader。

执行webpack打包之后我们打开文件查看，发现6.28kb的图片转为了base64：

webpack是前端开发者向着高级前端进阶的门槛，但是webpack相对难懂，本文也只是介绍了webpack中一些简单的打包技巧，所以学习webpack需要沉下心来，好好做总结。

---

ok，今天的分享就到这里啦，欢迎评论区讨论或者指正~