webpack not outputing css file

Question

Я действительно боюсь в течение нескольких часов, чтобы получить простое приложение для работы с webpack. Я не могу понять, что я делаю неправильно. Пожалуйста помоги!

Я занимаюсь разработкой приложения-редуктора-редуктора + машинописным текстом. У меня есть пользовательский файл 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-сервер (с командой npm start) Я получаю эту ошибку в браузере:

Теперь вы можете увидеть, что WebPack является outputing мой файл CSS в этом патче /css/inspinia.css. Но когда я смотрю на /dist, я вижу не созданную папку /css. Почему это делается? Какова логика? Я не мог видеть ясное объяснение из документации.

Из моих исследований на StackOverflow и вокруг сети, похоже, эта проблема может полагаться на пути этого плагин ExtractTextPlugin работы, а также publicPath собственности. Также я прочитал, что webpack-dev-сервер не записывает файлы на диск, а затем загружается из памяти ...

Но я вижу, что webpack сгенерировал выходной файл /dist containse = ing мои файлы пакета (index.html, bundle.js и vendor.bundle.js). Но я не вижу css-файл , содержащий мой файл css.

Любая помощь, любое предложение в правильном направлении будет принята с благодарностью. (Я уверен, что я делаю что-то глупое ...)

Благодаря

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

плагин нужно указать имя файла atribute:

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

И вам нужно установить эту версию:

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

Take посмотрите на эту конфигурацию: https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS

С уважением!