Webpack 使用样式 打包CSS

在本节中，我们将看到如何将一些样式添加到我们的项目中。 为此，我们需要安装两个加载器：

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

从上面的结果我们可以看出安装的加载器版本

+ style-loader@3.3.0
+ css-loader@6.3.0

• css-loader 将 CSS 解析为 JavaScript 并解析所有依赖项
• style-loader 将我们的 CSS 输出到 HTML 文档中的 <style> 标签中。

让我们在 webpack.config.js 中添加必要的配置：

module: {
  rules: [
    ...
    { 
      test: /\.css$/, 
      use: ["style-loader", "css-loader"] 
    },
  ]
},

完整的 配置文件如下

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/app.js'),
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'deploy')
    },
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
          { 
            test: /\.css$/, 
            use: ["style-loader", "css-loader"] 
          },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack - 迹忆客(jiyik.com)',
        })
    ],
};

在这里，加载器的顺序很重要。 它们以相反的顺序进行加载 - 即从右到左，从下到上。 在我们的例子中，首先加载 css-loader，然后是 style-loader。

现在让我们创建一个 src/style.css 文件

style.css

h1 {
  color: red;
}

然后在 app.js 中导入

import './style.css';

当我们运行 webpack (npm run dev) 然后打开 index.html 时，我们应该看到红色的信息 Hello, Webpack!!。

$ npm run dev

> webpack-example@1.0.0 dev /Users/jiyik/workspace/js/webpack-example
> webpack --mode development

asset main.bundle.js 24 KiB [emitted] (name: main)
asset index.html 257 bytes [compared for emit]
runtime modules 937 bytes 4 modules
cacheable modules 9.95 KiB
  modules by path ./node_modules/ 8.08 KiB
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB
      ./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
      ./node_modules/css-loader/dist/runtime/api.js 2.27 KiB [built] [code generated]
  modules by path ./src/ 1.87 KiB
    modules by path ./src/*.js 323 bytes
      ./src/app.js 98 bytes [built] [code generated]
      ./src/component.js 225 bytes [built] [code generated]
    modules by path ./src/*.css 1.55 KiB
      ./src/style.css 1.11 KiB [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js!./src/style.css 452 bytes [built] [code generated]
webpack 5.54.0 compiled successfully in 1510 ms

现在在浏览器中打开 index.html， 会看到如下结果

css也属于静态资源的一种，下一节我们介绍webpack对 图片等静态资源的管理