• 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一起使用

  • 相关阅读:
    业务需求、用户需求和功能需求
    乐观锁的两种实现方式
    数据字典
    freemarker(ftl)标签用法
    commons-lang常用方法
    前端与后端分离
    jar包导入本地maven库的操作
    本地打jar包到本地的Maven出库
    MyEclipse中好用的快捷键汇总整理
    简单的反编译class文件并重新编译的方法
  • 原文地址:https://www.cnblogs.com/cxdxm/p/6617602.html
Copyright © 2020-2023  润新知