extract-text-webpack-plugin 不创建 CSS 文件答案

【问题标题】：extract-text-webpack-plugin does not create CSS fileextract-text-webpack-plugin 不创建 CSS 文件
【发布时间】：2018-05-29 23:58:35
【问题描述】：

我有创建 bundle.js 的 webpack.config.js，但由于某种原因它没有创建任何 css 文件，尽管我有 css-loader、style-loader 和 extract-text-webpack-plugin。

我的 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  favicon: './client/asset/favicomatic/favicon.ico'
});
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'dist');

module.exports = {
  entry: ['./client/src/index.js'],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      { 
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [HtmlWebpackPluginConfig, new ExtractTextPlugin('style.css')]
};

我希望在我的文件夹中看不到任何 css 文件的其他地方创建这个捆绑的 css 文件。

如果有人发现我做错了什么，请告诉我。

谢谢，

【问题讨论】：

标签： webpack webpack-style-loader css-loader extracttextwebpackplugin

【解决方案1】：

配置对我来说看起来不错。

General ：虽然 webpack 加载器执行特定于资源的任务，但它的源代码需要定义依赖项。在您需要 CSS 样式的源代码中，您需要导入该 CSS 文件。第一次听到可能听起来很奇怪，但这就是 webpack 的工作原理。

Webpack 应该处理依赖图中的 CSS 依赖。如果未创建输出 css 文件，则可能缺少的部分是源代码中的依赖项声明，即 require("./css-file-here") 或 import "./css-file-here"

来自 webpack 指南here

这使您能够import './style.css' 进入依赖于的文件那个造型。

输出是否显示它处理了 CSS 源文件的任何迹象？

如果有帮助，请查看此 repo 中的 src/entry.js：webpack-bootstrap。在此期间，您可以尝试查看如何通过 webpack 应用引导样式。

【讨论】：

你的意思是我必须将我的css文件夹导入webpack吗？当我做 webpack -d 时，它没有任何 css 东西。它只有 bundle.js、favicon.ico 和 index.html。
虽然 webpack 加载器执行特定于资源的任务，但它的源代码需要定义依赖关系。在您需要 CSS 样式的源代码中，您需要导入该 CSS 文件。第一次听到可能听起来很奇怪，但这就是 webpack 的工作原理。如果它有助于查看此回购中的src/entry.js：github.com/rakcheru/webpack-bootstrap。在此期间，您可以尝试查看如何通过 webpack 应用引导样式。
想我明白了。非常感谢您的帮助！