使用 webpack 为捆绑代码添加样式

Posted 2023-02-22

【中文标题】使用 webpack 为捆绑代码添加样式

【英文标题】：Add style to bundled code using webpack

【发布时间】：2019-01-30 16:49:03

【问题描述】：

GitHub：https://github.com/Chirag161198/react-boilerplate1

这是我尝试从头开始制作的反应样板。 我已将 html 与反应代码捆绑在一起，但我无法添加样式 (CSS)。 我听说过 ExtractTextPlugin 但无法配置它。 请提出一些添加样式的方法。

提前谢谢你。

【问题讨论】：

可能需要看node-sass插件

【参考方案1】：

您需要在 webpack.config.js

中使用 style-loader 和 css-loader

首先，通过 npm 安装这两个包： npm install style-loader, css-loader --dev

然后，在您的 src 文件夹中创建一个 styles.css 并将以下样式附加到文件中（仅用于演示目的，因此您知道它可以正常工作）：

body 
  background-color: #ff4444;

不要忘记在 src/index.js 中导入 css 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
import './styles.css'; // <- import the css file here, so webpack will handle it when bundling

ReactDOM.render(<App />, document.getElementById('app'));

并在你的 webpack.config.js 中使用 style-loader 和 css-loader：

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

module.exports = 
  entry: './src/index.js',
  output: 
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
  ,
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        use:  loader: 'babel-loader' ,
      ,

      
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      ,
    ],
  ,

  plugins: [
    new HtmlWebpackPlugin(
      template: './src/index.html',
    ),
  ],
;

如果你没有看到正确的输出，你可能需要再次重启 webpack 开发服务器。我已经克隆了你的 repo 并进行了我上面提到的更改，它有效。

至于ExtractTextPlugin，您将在捆绑生产构建时需要它，您可以从他们的Repo 了解更多信息

希望对你有帮助！

【参考方案2】：

Hi Chirag ExtractTextPlugin 效果很好，但在缓存和捆绑散列方面。 Css 包变为 0 字节。所以他们介绍了MiniCssExtractPlugin，它已经解决了这个问题。随着您的应用程序大小随时间增加，缓存静态文件非常重要。 先导入插件：

var MiniCssExtractPlugin = require("mini-css-extract-plugin");

在你的 webpack 配置中添加这些：

rules: [

   
      test: /\.js$/,
      exclude: /node_modules/,
      use: 
        loader: 'babel-loader'
      
    ,
    
      test: /\.scss$/,
      use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    
  ]

plugins: [
  new MiniCssExtractPlugin(
    filename: 'style.css',
  ),
  new HtmlWebpackPlugin(
    template: './src/index.html',
  ),

让我知道问题仍然存在。

【讨论】：

你能告诉我为什么你在 HtmlWebpackPlugin 中添加了一个文件名选项吗？

默认情况下 webpack 将 HTML 写入 index.html 但如果我们必须指定不同的目录来注入 index.html 则我们指定文件名

当我使用与上面相同的方法时，它会在 npm run build 上引发错误，但是当我从 HtmlWebpackPlugin 中删除文件名选项时，它会完美地构建。

因为我的 build 目录在 src 目录之外。您不必对其进行自定义。