webpack处理项目中的资源文件

Posted 2020-09-06 吃草的虾米

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