使用 Loader 打包图片
官方文档《file-loader》
官方文档《url-loader》
使用 Loader 打包静态资源（样式）
1. css文件
使用loader：css-loader、style-loader。
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'] // 从右向左：必须先css-loader再style-loader
},
],
},
};即：一个带有字符串化的css的<style>标签将插入到html文件的<head>中。
css-loader
作用：css-loader 解释 import和url()，就像import/require()，并将解析它们。这使您能够使用 import './style.css' 导入样式到文件。
重要的options参数：
importLoaders：选项importLoaders，允许您在css-loader应用于@imported资源之前 配置多少其他loaders。modules：boolean。true：允许使用 CSS Modules。
style-loader
作用：通过注入一个<style>标签，把CSS添加到DOM中（添加到html文件的<head>中）。
建议将style-loader与css-loader结合使用。
2. sass文件
sass文件后缀可以为：.scss或.sass。
sass-loader
作用：加载一个 Sass/SCSS 文件，并将其编译成CSS。
下载loader:
npm install sass-loader node-sass webpack --save-dev则package.json里将包含：
{
"devDependencies": {
"sass-loader": "*",
"node-sass": "*"
}
}通常将sass-loader与css-loader和style-loader链接起来使用，以便立即将所有样式应用于DOM。如下：
webpack.json.js:
module.exports = {
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}]
};3. 使用 postcss-loader 的autoprefixer插件自动添加厂商前缀
PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀
使用loader：postcss-loader。
postcss-loader作用：为webpack处理CSS与PostCSS的loader。
postcss-loader中的「自动添加厂商前缀」autoprefixer 插件
postcss.config.js
module.exports = {
plugins: [require("autoprefixer")]
};module.exports = {
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"postcss-loader", // postcss.config.js中使用autoprefixer 插件(自动添加厂商前缀)
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}
]
}
}您可以单独使用postcss-loader，也可以与css-loader一起使用(推荐)。
注意： postcss-loader 应该在 css-loader 和 style-loader 之前使用，但是在其他预处理器加载器（如sass|less|stylus-loader）之后使用。
即 loader 顺序：less-loader -> postcss-loader -> css-loader -> style-loader 或者 MiniCssExtractPlugin.loader。loader执行顺序【牢记】
从下到上，从右到左。
执行"sass-loader"，将sass文件内容编译成CSS；
再给到"css-loader" 解释import和url()，就像import/require()，并将解析它们；
再给到"style-loader"，通过注入一个<style>标签，把CSS添加到DOM中渲染
其他
css-loader 例子
importLoaders例子
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
modules: true
}
},
"postcss-loader",
"sass-loader"
]分析：
0 => no loaders (default);
1 => postcss-loader; 即在执行css-loader之前，要执行postcss-loader
2 => postcss-loader, sass-loader。即在执行css-loader之前，要执行postcss-loader, sass-loader
modules例子
index.css:
.flag{
width:100px;
height: 100px;
background:red;
}index.js:
// 引入 CSS 模块
import style from "./index.css";
var divDom1 = document.createElement("div");
var divDom2 = document.createElement("div");
var divDom3 = document.createElement("div");
// 添加class（模块化）
divDom1.classList.add(style.flag);
divDom2.classList.add(style.flag);
// 普通添加方法（使用modules模式时此方法添加样式无效）
divDom3.classList.add("flag");
var rootDom = document.getElementById("root");
rootDom.appendChild(divDom1);
rootDom.appendChild(divDom2);
rootDom.appendChild(divDom3);最终生成的页面：
<style>
._3xdz5KOms7by7CM82HKDoW{
width:100px;
height: 100px;
background:red;
}
</style>
<body>
<div class="_3xdz5KOms7by7CM82HKDoW"></div>
<div class="_3xdz5KOms7by7CM82HKDoW"></div>
<div class="flag"></div>
</body>模块化生成的class名是一个唯一的字符串码，这样使样式是模块局部式的。
引入字体图标样式，webpack打包
前往阿里巴巴矢量图标库一次性下载一个或多个图标文件。
配置webpack:使用file-loader来处理。
module.exports = {
module:{
rules:[
{
test: /\.(eot|svg|ttf|woff)$/, // 处理字体图标文件
use: [
{
loader: "file-loader",
options: {
name: "font/[name].[ext]"
}
}
]
}
]
}
}将下载好的文件中的这些移动到项目中：
使用：
index.js:
// 引入字体图标样式
import fontStyle from "./font/iconfont.css";
var divDom = document.createElement("div");
divDom.innerHTML = `
<div class="iconfont iconaixin"></div>
<div class="iconfont iconbianji"></div>
<div class="iconfont icondianhua"></div>`;
rootDom.appendChild(divDom);