webpack学习—使用 Loader 打包静态资源

@一棵菜菜  June 28, 2019

使用 Loader 打包图片

官方文档《file-loader》
官方文档《url-loader》

使用 Loader 打包静态资源(样式)

1. css文件

使用loader:css-loaderstyle-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 解释 importurl(),就像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结合使用。

官方文档《css-loader》
官方文档《style-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-loadercss-loaderstyle-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 自动添加厂商前缀

使用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",
            "css-loader", 
            "postcss-loader", 
            "sass-loader"
         ]
      }
    ]
  }
}

您可以单独使用postcss-loader,也可以与css-loader一起使用(推荐)。
注意: postcss-loader 应该在 css-loader 和 style-loader 之后使用,但是在其他预处理器加载器(如sass|less|stylus-loader)之前使用。

官方文档《postcss-loader》

官方文档《sass-loader》

loader执行顺序【牢记】

从下到上,从右到左。

执行"sass-loader",将sass文件内容编译成CSS;
再给到"css-loader" 解释 importurl(),就像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]"
                }
              }
            ]
          }
        ]
    }
}

将下载好的文件中的这些移动到项目中:

font.png

使用:
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);

添加新评论