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

上回说到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/',
    }
  }]
}

122

源码查看:https://gitee.com/itxing666/webpackDemo feature/p02

关注公众号: 页面仔小杨 【实战干货、原创分享】

bottom

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值