如果要处理非 JS 类型的文件,我们需要手动安装一些合适第三方 loader 加载器
- 如果需要打包处理 css 文件,需要安装npm i style-loader css-loader -D
- 打开 webpack.config.js 这个配置文件,在里面新增一个配置节点,叫做 module,它是一个对象;在这个 module 对象身上,有个rules属性,这个rules属性是个数组;这个数组中,存放了所有第三方文件的匹配和处理规则。
module.exports = {
module: {
rules: [
{ test: /\.css$/, use:[ 'style-loader','css-loader' ,‘less-loader'] },
]
}
}
注:在调用 loader 的时候,是从后往前调用,当最后一个 loader 调用完毕,会把处理结果直接交给 webpack 进行打包合并,最终输出到bundle.js中去
使用 Loader
在你的应用程序中,有三种使用 loader 的方式:
- 配置(推荐):在 webpack.config.js 文件中指定 loader。
- 内联:在每个 import 语句中显式指定 loader。
- CLI:在 shell 命令中指定它们。