七、url-loader打包图片

在loader使用时不须要用require引入，在plugins（插件）才须要使用require引入

file-loader

解决引用路径的问题，拿background样式用url引入背景图来讲，咱们都知道，webpack最终会将各个模块打包成一个文件，所以咱们样式中的url路径是相对入口html页面的，
而不是相对于原始css文件所在的路径的。这就会致使图片引入失败。这个问题是用file-loader解决的，file-loader能够解析项目中的url引入（不只限于css），根据咱们的配置，
将图片拷贝到相应的路径，再根据咱们的配置，修改打包后文件引用路径，使之指向正确的文件。

url-loader

若是图片较多，会发不少http请求，会下降页面性能。这个问题能够经过url-loader解决。url-loader会将引入的图片编码，生成dataURl。至关于把图片数据翻译成一串字符。
再把这串字符打包到文件中，最终只须要引入这个文件就能访问图片了。固然，若是图片较大，编码会消耗性能。所以url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，
大于limit的还会使用file-loader进行copy。

为何只使用url-loader

有的小伙伴会发现咱们并无在webpack.config.js中使用file-loader，可是依然打包成功了。咱们须要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢？
简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即便用url-loader时，只须要安装url-loader便可，不须要安装file-loader，由于url-loader内置了file-loader。
经过上面的介绍，咱们能够看到，url-loader工做分两种状况：

1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；

2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。

也就是说，其实咱们只安装一个url-loader就能够了。可是为了之后的操做方便，咱们这里就顺便安装上file-loader。

 目录

在entry.js中引入要打包进js的css

import css from './css/entry.css'

webpack.config.js配置文件

// node中的引入路径模块
const path = require('path');
// 引入webpack
const webpack = require('webpack');
// 打包html
const htmlPlugin= require('html-webpack-plugin');
// 压缩js
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
    //入口文件的配置项
    entry: {
        entry: './src/js/entry.js'
    },
    //出口文件的配置项
    output: {
        //输出的路径，用了Node语法
        path: path.resolve(__dirname, 'dist'),
        //输出的文件名称
        filename: 'js/bundle.js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module: {
        rules: [
            {
            // 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
            test: /\.css$/,
            //   loader名称，就是你要使用模块的名称，这个选项也必须进行配置，不然报错；
            use: ['style-loader', 'css-loader']
            //   include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不须要处理的文件（文件夹）（可选）
            // query：为loaders提供额外的设置选项（可选）
        },
        {
            test:/\.(png|jpg|gif)/ ,
            // 指定使用的loader和loader的配置参数
            use:[{
                loader:'url-loader',
                options:{
                    // 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入
                    // limit:500000
                    // 如今是以图片形式引入
                    limit:50,
                    // 指定图片输出的目录
                    outputPath:'images/'
                }
            }]
         }
    ]
    },
    //插件，用于生产模版和各项功能 压缩打开 热更新就会失效
    plugins: [
        // new uglify(),
        new htmlPlugin({
            // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号
            minify:{
                removeAttributeQuotes:true
            },
            // 为了开发中js有缓存效果，因此加入hash，这样能够有效避免缓存JS
            hash:true,
            // 是要打包的html模版路径和文件名称
            template:'./src/index.html'
           
        })
    ],
    //配置webpack开发服务功能
    devServer: {
        //设置基本目录结构
        contentBase: path.resolve(__dirname, 'dist'),
        //服务器的IP地址，可使用IP也可使用localhost
        host: 'localhost',
        //服务端压缩是否开启
        compress: true,
        //配置服务端口号
        port: 9079
    }
}

package.json依赖项

{
  "name": "xz",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

打包命令

npm start 开发环境 webpack 生产环境