更多内容已经迁移至掘金,欢迎来指导学习:

https://juejin.im/post/5d64ce915188250a985809b0

1. 安装依赖:

  1. cnpm install --save-dev url-loader image-webpack-loader html-loader

2. webpack.config.js规则的配置

  1. /*
  2. * url-loader:主要是图片处理和Base64编码(base64就是一串加密的字符串,而且base64编码过的图片是没有http请求的)
  3. * image-webpack-loader:主要是压缩图片
  4. * */
  5. {
  6. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  7. use: [
  8. {
  9. loader: "url-loader",
  10. options: {
  11. name: "[name]-[hash:5].min.[ext]",
  12. limit: , // size <= 8KB
  13.          publicPath: "../images",
  14. outputPath: "./images"
  15. }
  16. },
  17. {
  18. loader: 'image-webpack-loader',
  19. options: {
  20. bypassOnDebug: true
  21. }
  22. }
  23. ]
  24. },
  25. //主要是处理html中的img标签的loader
  26. {
  27. test: /\.html$/,
  28. use: [{
  29. loader: 'html-loader',
  30. options: {
  31. minimize: true
  32. }
  33. }],
  34. }

3. 相关css文件和html文件

4. 合成雪碧图:雪碧图是为了减少网络请求,所以被处理雪碧图的图片多为各式各样的 logo 或者大小相等的小图片。而对于大图片,还是不推荐使用雪碧图。

  4.1 安装依赖

  1. //postcss-loader和postcss-sprites则用来合成雪碧图,减少网络请求
  2. cnpm install --save-dev postcss-loader postcss-sprites

  4.2 配置webpack.config.js文件

  1. //配置雪碧图
  2. let spritesConfig = {
  3. spritePath: "./dist/images"
  4. };

结合postcss-loader配置postcss-sprites

  1. // 编译css scss sass文件
  2. {
  3. test: /\.(sa|sc|c)ss$/,
  4. /*
  5. * 从右向左编译
  6. * style-loader:将 JS 字符串生成为 style 节点
  7. * css-loader:将 CSS 转化成 CommonJS 模块
  8. * sass-loader:// 将 Sass 编译成 CSS
  9. * use: ['style-loader', 'css-loader', "postcss-loader", 'sass-loader']
  10. * */
  11. use: [
  12. {
  13. loader: "style-loader",
  14. options: {
  15. singleton: false // 处理为单个style标签
  16. }
  17. },
  18. {
  19. loader: "css-loader"
  20. },
  21. {
  22. loader: 'postcss-loader',
  23. //postcss-sprites需要结合postcss-loader合成雪碧图
  24. options: {
  25. ident: "postcss",
  26. plugins: [require("postcss-sprites")(spritesConfig)]
  27. }
  28. },
  29. {
  30. loader: 'sass-loader'
  31. }
  32. ]
  33.  
  34. },
  35. // 文本分离:配置scss
  36. {
  37. test: /\.scss$/,
  38. use: extractTextWebpackPlugin.extract({
  39. fallback: 'style-loader',
  40. use: [
  41. {loader: 'css-loader'},
  42. {
  43. loader: 'postcss-loader',
  44. //postcss-sprites需要结合postcss-loader合成雪碧区、图
  45. options: {
  46. ident: "postcss",
  47. plugins: [require("postcss-sprites")(spritesConfig)]
  48. }
  49. },
  50. {loader: 'sass-loader'}
  51. ]
  52. })
  53. },

在编译完成以后,会自动在css文件里面处理background-size和background-position,完美的显示图片

webpack.config.js====图片处理的更多相关文章

  1. webpack.config.js 参数简单了解

    webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exp ...

  2. webpack3中文版使用参考文档--全面解析webpack.config.js

    Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...

  3. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

  4. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  5. webpack.config.js文件的高级配置

    一.多个入口文件之前我们配置的都是 一个入口 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.Co ...

  6. 配置webpack.config.js中的文件

    webpack.config.js文件中,主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件 这几部分 1.基本配置 运行 webpack 这一命令可以将 ...

  7. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  8. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  9. webpack webpack.config.js配置

    安装指定版本的webpack npm install webpack@3.6 -g 安装live-server    运行项目插件   输入live-server  运行后自动打开网页 npm ins ...

随机推荐

  1. new types may not be defined in a return type(c++语言编译错误,处理)

    在写程序的时候,定义类时要在大括号后面加上: class Point{ public: Point(int a,int b); Point(const Point &p); int getx( ...

  2. Hyperledger Fabric java chaincode 编译部署(1.4V)

    前提条件: 构建好了一个拥有四个peer 一个Order 的1.4版本的Fabric网络. 证书通过Cryptogen生成,没有使用CA服务. 开启TLS. 网络中的peer都加入了一个 名为mych ...

  3. New Distinct Substrings(后缀数组)

    New Distinct Substrings(后缀数组) 给定一个字符串,求不相同的子串的个数.\(n<=50005\). 显然,任何一个子串一定是后缀上的前缀.先(按套路)把后缀排好序,对于 ...

  4. [bzoj2743][HEOI2012]采花(树状数组)

    题目描述 萧薰儿是古国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花. 花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一排的,以便于 ...

  5. ajax遍历数据生成下拉框

    <script type="text/javascript">        function GetEQIDList(ModuleID)    {        $. ...

  6. IDEA mybatis-generator 逆向工程

    1.在maven工程中的resource中创建generatorConfig.xml 2.配置generatorConfig.xml <?xml version="1.0" ...

  7. 2019.2.14 考试T1 FFT

    \(\color{#0066ff}{ 题目描述 }\) 衡水二中的机房里经常有人莫名其妙地犇雷,leizi很生气,决定要找出那个犇雷的人 机房有n个人,每个人都认为机房里有两个人可能会犇雷,其中第i个 ...

  8. 使用git将本地代码提交到码云上去

    码云为开源中国基于git的代码网络托管平台,将代码托管.开发与项目管理工具融为一体.今天第一次将自己的web项目代码上传至码云,过程中遇到一些问题,此处进行总结与过程的演示:当我们在码云上创建好项目后 ...

  9. MYSQL常用命令笔记(一)

    1.show databases; 显示数据库 2.create database test; 创建数据库test 3.use test: 使用这个数据库 4.创建表class: create tab ...

  10. python 批量下载 spring 的 xsd

    #coding=utf-8 import os import urllib import urllib2 import re from bs4 import BeautifulSoup # 利用 ur ...