webpack 4+ 学习（2）_webpack4 和 webpack2 的路由却别-优快云博客

本文介绍如何使用Webpack加载CSS和图片资源。通过配置不同的loader，如style-loader、css-loader及file-loader，实现对样式表和图像文件的有效管理和打包。

管理资源

webpack 最出色的功能之一是，除了 JavaScript ，还可以通过 loader 引入任何其他类型的文件。

加载 CSS

需要在 module 配置中安装并添加 style-loader 和 css-loader

npm install --save-dev style-loader css-loader

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

webpack 根据正则表达式，来确定应该查找哪些文件，并将起提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader

在 src 下新建 style.css文件

src/style.css

.hello {
    color : red;
}

在 src 下的 index.js 中引入 style.css

import './style.css'

window.onload = function () {

}

修改 dist 文件下的 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
    <script src="bundle.js"></script>
</head>
<body>
    <div class="hello">
        Hello Webpack 4
    </div>
</body>
</html>

运行构建命令 => npm run build，可以看到红色的 Hello Webpack 4

加载图片

处理 css 中的背景和图标这些图片，使用 file-loader ，可以轻松的将这些内容混合到 css 中：

npm install --sava-dev file-loader

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };

在 src 文件夹下添加 wx.png

  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- wx.png
    |- style.css
    |- index.js
  |- /node_modules

在 src/index.js 中引入

import wx from './wx.png'
import './style.css'

window.onload = function () {

}

修改 src/style.css 样式

.hello {
    color : red;
    font-size: 28px;
    background: url("./wx.png");
}

webpack 4+ 学习 （2）

管理资源

加载 CSS

加载图片

webpack 4+ 学习（2）