zoukankan      html  css  js  c++  java
  • webpack处理项目中的资源文件

    webpack处理项目中的资源文件
    loader:可同步可异步,可在nodejs里使用,可带参数,可让webpack去执行它不支持的东西 例如我们之前用到的style-loader,常用的方式是在webpack.config.js中加loader配置

    安装babel-loader: npm install --save-dev babel-loader babel-core

    3.安装 latest:nmp install --save-dev babel-preset-latest

    4.可在package.json里配置latest,也可直接写在webpack.config.js里

      "label":{

        "presets":["latest"]

      }

    5.处理一些css中不容易被浏览器解析的东西我们需要安装后处理器 npm install postcss-Loader --save-dev

    postcss插件 autoprefixer npm install autoprefixer --save-dev

    6.处理less文件 需要安装 npm i less-loader --save-dev

    7.处理静态的html模版文件 需要安装 npm install html-loader --save-dev

    8.处理ejs模版文件 需要安装 ejs-loader,并且在webpack-config文件里配置该loader

    9.处理图片文件安装 file-loader

      9.1:处理css中引入的图片

      9.2:处理img的方式引入的图片

      9.3:组件中引用图片(如果非要使用 相对路径需要${require('../img/aa.png')})

    10.安装 url-loader,类似于file loader 但是他可以指定一个limit参数,当你的文件和图片大于你指定的limit的时候 它会给file loader执行,当你的文件小于limit的时候 它会自动转换成一个base64的编码

    11.image-webpack-loader 压缩图片,但是必须结合url-loader或者file-loader一起使用

  • 相关阅读:
    代码重构~方法归子
    代码重构~代码注释
    VS2010安装帮助文档
    imagecreate()与imagecreatetruecolor()区别
    php cookie 和session详解
    horner's rule霍纳法则及综合除法
    php单引号和双引号的区别与用法
    php通过session判断用户是否登录
    php 产生验证码
    基于递归的整数幂的计算
  • 原文地址:https://www.cnblogs.com/ArielChen/p/7469410.html
Copyright © 2011-2022 走看看