Javascript 使用webpack向捆绑代码添加样式

GitHub:1

这是我试图从头开始制作的react样板。 我已经将html与react代码捆绑在一起，但我无法添加样式（CSS）。 我听说过ExtractTextPlugin，但无法配置它。 请建议一些添加样式的方法

---

提前谢谢。

您需要在webpack.config.js中使用样式加载器和css加载器

首先，通过npm安装这两个软件包：

npm安装样式加载器，css加载器--dev

然后，在

src

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

不要忘记在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'));

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 dev服务器。我已经克隆了你的回购协议，并进行了如上所述的更改，它是有效的

至于

ExtractTextPlugin

，您在捆绑产品构建时需要它，您可以从他们的

---

希望有帮助

Hi Chirag

ExtractTextPlugin

非常有效，但当涉及到缓存和捆绑哈希时。Css包变为0字节。因此，他们引入了

MiniCssExtractPlugin

，解决了这个问题。随着应用程序大小的增加，缓存静态文件非常重要。 首先导入插件：

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

在您的网页包配置中添加以下内容：

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',
  }),

---

让我知道问题仍然存在。

可能，你需要看看

节点sass

pluginga你能告诉我为什么你在HtmlWebpackPlugin中添加了一个文件名选项吗？默认情况下，webpack会将HTML写入index.HTML，但如果我们必须指定不同的目录来注入index.HTML，那么当我使用上面相同的方法时，我们会指定文件名，它在npm运行构建时抛出了一个错误，但当我从HtmlWebpackPlugin中删除filename选项时，它的构建非常完美。因为我的构建目录在src目录之外。你不必定制它。

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',
  }),