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）时，我在浏览器中收到此错误：

现在你可以看到 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 中你需要做一些改变：

模块：{ 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

问候！