Question

我有webpack.config.js创建了bundle.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文件。

如果有人能找到我做错的事，请告诉我。

谢谢，

Answer 1

配置对我来说很好。

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

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

来自网络包指南here

这使您可以import './style.css'进入依赖的文件造型。

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

如果它有助于查看此仓库中的src / entry.js：webpack-bootstrap。在它的同时你可以尝试看看如何通过webpack应用引导程序样式。

extract-text-webpack-plugin不会创建CSS文件

1 个答案: