是切图仔还是工程师就看会不会它（webpack-2）

最新推荐文章于 2025-06-27 17:59:08 发布

原创最新推荐文章于 2025-06-27 17:59:08 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

构建工具专栏收录该内容

3 篇文章

订阅专栏

上回说到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数组的执行顺序从右向左或者从下向上执行

118

119

**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="">

120

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/',
    }
  }]
}