webpack没有输出css文件

Question

我现在正在争取几个小时才能获得一个与webpack一起运行的简单应用程序。我无法弄清楚我做错了什么。请帮忙！

我正在构建react-redux-router application + typescript。我有一个自定义的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）运行时，我在浏览器中收到此错误：

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

根据我对stackoverflow和网络的研究，看起来问题可能依赖于此插件 ExtractTextPlugin 的工作方式以及publicPath属性。另外我读到webpack-dev-server不会在磁盘上写文件，而是从内存中提供文件......

但是我可以看到webpack生成了输出文件/dist，包含了我的包文件（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中，您需要进行一些更改：

module：{loaders ...}，现在是模块：{rules：...}。

您应该像这样进行测试：

{
            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

问候！