在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。JavaScript 模块也遵循同样方式，但是，像 webpack 这样的工具，将动态打包所有依赖（创建所谓的依赖图(dependency graph)）。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，可以避免打包未使用的模块。

webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。

初始化示例工程

首先我们创建一个目录webpack-css，用npm初始化，然后在本地安装 webpack：

mkdir webpack-css
cd webpack-css
npm init -y
npm install webpack webpack-cli --save-dev

目录结构、文件和内容如下：

  webpack-css
 |- package.json
 |- /dist
   |- index.html
 |-webpack.config.js

其中dist/index.html文件内容为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 资源管理</title>
    <script src="bundle.js"></script>
</head>
<body>
      <div class="css_demo">css 资源管理</div>
</body>
</html>

webpack.config.js的文件内容如下：

 const path = require('path');
 module.exports = {
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
   },
 };

package.js的文件内容如下：

{
  "name": "webpack-css",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.28.0"
  }
}

加载 CSS

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置中添加这些 loader：

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

修改webpack.config.js添加加载CSS：

const path= require('path')

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

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会按逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误。

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。

这使你可以在依赖于此样式的 js 文件中使用 import './style.css'。现在，在此模块执行过程中，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。

我们尝试一下，通过在项目中添加一个新的 style.css 文件，并将其 import 到我们的 index.js 中。

在src的目录下创建 style.css 文件，src/style.css文件内容如下：

.css_demo {
  color: red;
}

在src/index.js的文件中引入style.css：

import './style.css'

执行打包命令

npm run build

> webpack-css@1.0.0 build D:\project\mockjs\webpack-css
> webpack

asset bundle.js 3.58 KiB [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 8.9 KiB
  modules by path ./src/ 679 bytes
    ./src/index.js + 1 modules 346 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/style.css 333 bytes [built] [code generated]
  modules by path ./node_modules/ 8.23 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.28.0 compiled with 1 warning in 1573 ms

再次在浏览器中打开 dist/index.html，你应该看到 css 资源管理现在的样式是红色。要查看 webpack 做了什么，请检查页面（不要查看页面源代码，它不会显示结果，因为 <style> 标签是由 JavaScript 动态创建的），并查看页面的 head 标签。它应该包含 style 块元素，也就是我们在 index.js 中 import 的 css 文件中的样式。

注意，在多数情况下，你也可以进行压缩 CSS，以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 风格 - postcss, sass 和 less 等。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

webpack资源管理一之加载 CSS使用详解

初始化示例工程

加载 CSS