加载器loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中引入CSS文件！
当我们项目中用js引入css 就会出现解析打包失败的情况
加载器配置：webpack在打包时，会根据js文件中的引用文件中的引入语法，去加载其他文件；然后读取他文件中，webpack只能识别js和json文件。
需要加载器loader去按照对应的文件编码进行解析
不同文件类型就要去使用不同的规则去解析，不同规则就不用的加载器
css-loader&style-loader
css-loader解析css文件
style-loader把 css-loader 生成的内容，用 style 标签挂载到页面的 head 中
1.npm install css-loader style-loader --save-dev
//加载器配置loader,
module:{
rules:[
{test:/\.css$/,use:["style-loader","css-loader"]}
]
}
}
外部文件形式生成css资源
npm i mini-css-extract-plugin --save-dev
module: {
rules: [
//运行bundle时直接以style标签形式动态写入到页面
{test:/\.css$/,use:["style-loader","css-loader"]},
{
test: /\.css$/,//css生成到css文件中,项目中以形式引入使用
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[hash].css' //css生成到css文件中,项目中手动以形式引入使用
})
]
file-loader
项目中引入了常见类型(好多类型, 比如视频音频图片等等媒体编码)的文件,可以使用file-loader将其打包
npm i file-loader --save-dev
//webpack.config.js文件:
module: {
rules: [
//直接以style标签形式动态写入到页面
{test:/\.css$/,use:["style-loader","css-loader"]},
//项目中引入了以下结尾的文件就会启动file-loader
{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
]
}
ts-loader
将 TypeScript 转为 JavaScript
npm install ts-loader webpack typescript --save-dev
项目中新建一个tsconfig.json文件(这是ts编译需要的配置文件)
//webpack.config.js文件:
module: {
rules: [
//直接以style标签形式动态写入到页面
// {test:/\.css$/,use:["style-loader","css-loader"]},
{
test: /\.css$/,
//css生成到css文件中,项目中以形式引入使用
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
{ test: /\.ts$/, use: 'ts-loader' },
]
},
babel-loader
Babel 是一个 JavaScript编译器，它是一个工具链，主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。babel-loader就是用babel工具将ES6转成ES5的一种加载器. 在webpack打包时遇到js文件，就交给babel处理。
npm install babel-loader @babel/core @babel/preset-env webpack -D
//webpack.config.js文件
module: {
rules: [
//直接以style标签形式动态写入到页面
{test:/\.css$/,use:["style-loader","css-loader"]},
{
test: /\.css$/,
//css生成到css文件中,项目中以形式引入使用
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
{ test: /\.ts$/, use: 'ts-loader' },
//exclude:/node_module/ 意思是下载的模块不转码,其他js文件转码
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
},
总结:babel-loader 很慢！解决办法：要排除 node_modules，参考文档中的 loaders 配置的 exclude 选项。
sass-loader
把Sass代码转化为css代码
npm install sass-loader sass webpack --save-dev
//webpack.config.js文件:
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader', //不用单独引入 直接运行js代码 动态写入页面
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
],
},