首页 > 代码库 > 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处理项目中的资源文件