webpack不输出css文件

Question

我现在确实在奋斗几个小时，以使一个简单的应用程序与webpack一起运行。 我不知道自己在做什么错。 请帮忙！

我正在构建react-redux-router应用程序+打字稿。 我有一个自定义的CSS文件，我想在我的项目中使用。

这是我的webpack.config文件：

var webpack = require('webpack');
var path = require('path');

// variables
var isProduction = process.argv.indexOf('-p') >= 0;
var sourcePath = path.join(__dirname, './src');
var outPath = path.join(__dirname, './dist');

// plugins
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: sourcePath,
  entry: {
    main: './index.tsx',
    vendor: [
      'react',
      'react-dom',
      'react-redux',
      'react-router',
      'react-router-redux',
      'redux'
    ]
  },
  output: {
    path: outPath,    
    filename: 'bundle.js',
  },
  target: 'web',
  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
    // Fix webpack's default behavior to not load packages with jsnext:main module
    // https://github.com/Microsoft/TypeScript/issues/11677 
    mainFields: ['main']
  },
  module: {
    loaders: [
      // .ts, .tsx
      {
        test: /\.tsx?$/,
        loader: isProduction
          ? 'awesome-typescript-loader?module=es6'
          : [
            'react-hot-loader',
            'awesome-typescript-loader'
          ]
      },
      // css 
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',                 
          loader: [
            {
              loader: 'css-loader',
              query: {
                modules: true,
                sourceMap: !isProduction,
                importLoaders: 1,
                localIdentName: '[local]__[hash:base64:5]'
              }
            },
            {
              loader: 'postcss-loader'
            }
          ]
        })
      },
      // static assets 
      { test: /\.html$/, loader: 'html-loader' },
      { test: /\.png$/, loader: "url-loader?limit=10000" },
      { test: /\.jpg$/, loader:  'file-loader' },
    ],
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        context: sourcePath,
        postcss: [
          require('postcss-import')({ addDependencyTo: webpack }),
          require('postcss-url')(),
          require('postcss-cssnext')(),
          require('postcss-reporter')(),
          require('postcss-browser-reporter')({ disabled: isProduction }),
        ]
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js',
      minChunks: Infinity
    }),
    new webpack.optimize.AggressiveMergingPlugin(),
    new ExtractTextPlugin('/assets/css/inspinia.css'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ],
  devServer: {
    contentBase: sourcePath,
    hot: true,
    stats: {
      warnings: false
    },
  },
  node: {
    // workaround for webpack-dev-server issue 
    // https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179
    fs: 'empty',
    net: 'empty'
  }
};

现在在我的src文件夹中，我有一个assets文件夹，在其中放置了资产。 这是文件结构：

我试图提供“ inspinia.css ”文件。 这就是我在index.tsx文件中的要求：

require('./assets/css/inspinia.css');

编译正常，没有错误。 但是，当我使用webpack-dev-server（使用命令npm start ） npm start ，在浏览器中出现此错误：

现在您可以看到webpack在此补丁/css/inspinia.css正在输出我的CSS文件。 但是当我查看/dist ，看不到/css文件夹生成。 为什么要这样做？ 背后的逻辑是什么？ 我从文档中看不到明确的解释。

从我对stackoverflow和整个Web的研究来看，问题似乎可能取决于此插件ExtractTextPlugin的工作方式以及publicPath属性。 我也读到webpack-dev-server不会在磁盘上写文件，而是从内存中提供文件...

但是我可以看到webpack已生成输出文件/dist containse = bundle文件（index.html，bundle.js和vendor.bundle.js）。 但是我看不到包含CSS文件的CSS。

任何帮助，对正确方向的任何建议将不胜感激。 （我确定我做的事很蠢...）

谢谢

编辑1

这是我的package.json：

{
  "name": "react admin",
  "version": "1.0.0",
  "private": true,
  "description": "React admin",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 3000 --open",
    "build": "webpack -p --progress --colors"
  },
  "license": "MIT",
  "devDependencies": {
    "@types/classnames": "^0.0.32",
    "@types/node": "^7.0.4",
    "@types/react": "^15.0.6",
    "@types/react-dom": "^0.14.22",
    "@types/react-redux": "^4.4.36",
    "@types/react-router": "^3.0.0",
    "@types/react-router-redux": "^4.0.39",
    "@types/redux-actions": "^1.2.2",
    "@types/webpack": "^2.2.4",
    "@types/webpack-env": "^1.13.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.5",
    "file-loader": "^0.10.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.28.0",
    "postcss": "^5.2.11",
    "postcss-browser-reporter": "^0.5.0",
    "postcss-cssnext": "^2.9.0",
    "postcss-import": "^9.1.0",
    "postcss-loader": "^1.2.2",
    "postcss-reporter": "^3.0.0",
    "postcss-url": "^5.1.2",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.13.1",
    "typescript": "^2.1.5",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.2.0",
    "webpack-hot-middleware": "^2.16.1"
  },
  "dependencies": {
    "@types/jquery": "^2.0.40",
    "@types/react-bootstrap": "0.0.45",
    "classnames": "^2.2.5",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "react-router-redux": "^4.0.7",
    "redux": "^3.6.0",
    "redux-actions": "^1.2.1"
  }
}

Answer 1

在webpack 2中，您需要进行一些更改：

模块：{装载机...}，现在是模块：{规则：...}。

您应该像这样进行测试：

{
            test: /\.css$/i,
            include: resolve(__dirname, './../app/stylesheets'),
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        importLoaders: 1,
                        minimize: true
                    },
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: () => ([
                            require("postcss-import")({
                                //If you are using postcss-import v8.2.0 & postcss-loader v1.0.0 or later, this is unnecessary.
                                //addDependencyTo: webpack // Must be first item in list
                            }),
                            require("postcss-nesting")(),  // Following CSS Nesting Module Level 3: http://tabatkins.github.io/specs/css-nesting/
                            require("postcss-custom-properties")(),
                            require("autoprefixer")({
                                browsers: ['last 2 versions', 'ie >= 9'] 
                            })
                        ])
                    }
                }
            ]
        }

插件需要指定文件名属性：

    new ExtractTextPlugin({
        filename: '../dist/main.css',
        allChunks: true
    }),

并且您需要安装此版本：

    "extract-text-webpack-plugin": "^2.0.0-rc.2",

看一下这个配置： https : //github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS

问候！