webpack默认只能处理，js和json文件，可以对文件的依赖进行分析，对文件进行压缩等等。如果想要处理其它类型的文件或者使用ES6甚至ES7就要借助loader以及plugin了。
loader
loader用于加载文件。loader有三种使用方式，但是推荐在webpack配置文件中配置，其他两种去文档里面看看了解下loader。并不推荐使用。
以加载css文件为例看看loader的使用，处理css需要安装css-loader和style-loader
css-loader:只负责加载css模块,不会将加载的css样式应用到html
style-loader:负责将css-loader加载的css样式动态的添加到html-head-style标签中.（Adds CSS to the DOM by injecting a <style> tag）。即在html中创建一个style标签，将css插入进去。也可以通过link标签插入。具体使用查看配置文档style-loader
G:\vscode\webpackDemo>npm i css-loader style-loader -D
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
},
output: {
filename: 'main.js',
path: path.resolve('./dist'),
},
module: {
rules: [{
test: /\.css$/,
//use: 'css-loader',// 只有一个loader且不用传参数。
// use:['style-loader','css-loader'], // 多个loader不用传参数
use: [ // loader 需要传参数
'style-loader',
{
loader: 'css-loader',
options: {
}
}
]
}]
}
}
创建style.css并在index.js中引用它，
index.js
为了看到style.css的效果，创建一个html文件，引用打包生成的文件。
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
浏览器打开index.html就可以看到效果了。
loader的顺序
...
use:['style-loader','css-loader'],
...
当有多个loader的时候，webpack会从右向左依次调用loader，以上上面的为例。css-loader处理之后交给style-loader，它负责运行的时候将css插入html中。
style-loader是在运行的时候插入style的。我们创建的html文件只是引用了打包之后的文件。webpack此时并没处理html文件的能力。
处理css 中的url和字体文件
file-loader
处理这两种文件需要使用 file-loader
npm i -D file-loader,
...
module:{
rules:[
...
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'image', // 输出到 output.path指定的文件夹下的image文件夹
},
},
],
exclude: /node_modules/,
},
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
},
]
}
file-loader 的功能和它的名字一样，就是加载文件，把指定的文件复制指定位置，同步修改被复制的文件在js，css等文件中的引用路径。
url-loader
也可以使用url-loader。url-loader 功能和file-loader相似，只是当文件大小小于配置的大小的时候，会把文件转换成DataURL,，当文件大于等于配置的大小的时候，会默认调用file-loader，同时会把自己的所有配置也传递给调用的loader，也可以配置其它的loader，url-loader自己有这么三个配置项，
limit ---> 配置大小，小于此配置的文件会被转换成DataURL
fallback ---> 当文件大小大于配置大小的时候，要调用的loader--默认调用file-loader
mimetype---， 文件类型，不指定的时候自动根据后缀判断
抽离单独的css文件
使用MiniCssExtractPlugin，在webpack4上，这个插件是将css单独抽离出来然后通过link标签引入到html中，所以这个loader和style-loader 是不能同时使用的。
style-loader 适用于开发环境，因为它将样式动态的插入到html中去。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
要指定输出文件名，在plugins中传配置参数 filename，如果要指定publicPath，则给loader传递配置，是分开配置的。
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
