首页 > 代码库 > 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一起使用

webpack处理项目中的资源文件