webpack不输出css文件

Question

I am really fighting for several hours now to get a simple app to run with webpack. I can't figure out what I am doing wrong. Please help!

I am building react-redux-router application + typescript. I have a custom css file that I would like to use in my project.

Here is my webpack.config file:

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'
  }
};

Now in my src folder, I have an assets folder where I have put my assets. Here is the file structure:

I am trying to require the " inspinia.css " file. This is how I am requiring it in my index.tsx file:

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

Compilation is ok and I get no error. But when I run with webpack-dev-server ( with command npm start ) I get this error in the browser:

Now you can see that webpack is outputing my css file in this patch /css/inspinia.css . But when I look at the /dist I see no /css folder generated. Why is doing it? What is the logic behind?? I could not see a clear explanation from the documentation.

From my research on stackoverflow and around the web, it looks like the problem could rely on the way this plugin ExtractTextPlugin works and also the publicPath property. Also I read that webpack-dev-server does not write files on disk but serves then from memory...

But I can see that webpack has generated the output file /dist containe=ing my bundle files (index.html, bundle.js and vendor.bundle.js). But I do not see a css containing my css file.

Any help, any suggestion toward the right direction would be greatly appreciated. (I am sure I am doing something stupid...)

Thanks

EDIT 1

Here is my 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

In webpack 2 you need some changes:

module: { loaders ... }, now are module: {rules: ... }.

You should do the test like this:

{
            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'] 
                            })
                        ])
                    }
                }
            ]
        }

The plugin need to specify filename atribute:

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

And you need to install this version:

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

Take a look to this config: https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS

Regards!