Javascript 网页包后处理加载程序：模块分析错误

我试图通过组合一个简单的项目来学习Webpack的优点，但在加载样式表时遇到了问题。我正在使用Node v4.4.4和webpackv1.13.1

这是我的网页配置：

require("babel-polyfill");

const path              = require('path');
const srcPath           = path.join(__dirname, 'src');
const webpack           = require('webpack');
const nodeModulesPath   = path.join(__dirname, 'node_modules');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var atImport            = require('postcss-import');
var webpackPostcssTools = require('webpack-postcss-tools');
var map                 = webpackPostcssTools.makeVarMap('./src/styles/app.css');

module.exports = {
  // devtool: 'cheap-module-eval-source-map',
  devtool: 'eval',

  entry: [
    // Set up an ES6 environment
    'babel-polyfill',
    // For hot style updates
    'webpack/hot/dev-server',
    // The script refreshing the browser on non-hot updates
    'webpack-dev-server/client?http://localhost:8080',
    // Application entry point
    './src/styles/app.css',
    './src/index'
  ],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/public/'
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/, include: /src/, loaders: ['eslint']
      }
    ],
    loaders: [
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000' },
      { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file'},
      { test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          "css?importLoaders=1!postcss-loader") 
        },
      { test: /\.js$/,
        include: path.join(__dirname, 'src'),
        loader: 'babel',
        query: {
          presets: ['es2015']
        } 
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.css'],
    modulesDirectories: ["src", "node_modules"]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("[name].css")
  ],
  postcss: function(){ return [
    atImport({
      path: 'src/styles/app.css',
      addDependencyTo: webpack
    }),
    webpackPostcssTools.prependTildesToImports,
    require('postcss-custom-properties')({
        variables: map.vars
    }),
    require('postcss-custom-media')({
        extensions: map.media
    }),
    require('precss')(),
    // require('postcss-cssnext')(),
    require('postcss-reporter')(),
    // require('postcss-nested')(),
    require('postcss-responsive-type')(),
    require('postcss-font-magician')()
  ]},
  "scripts": {
    "start:dev": "webpack-dev-server --progress --colors --content-base src/"
  },
  devServer: {
    contentBase: "./src"
  }
}

我的index.js文件只有一行：

require（'./styles/app.css'）

这是我的app.css文件：

@import './_config.css';
@import './_ie.css';
@import './lib/index.css';
@import './base/index.css';
@import './layout/index.css';
@import './modules/index.css';
@import './states/index.css';

以下是错误：

$ webpack --watch ./src/index.js ./public/bundle.js
Hash: 7d7eb727fa9ce93aed07
Version: webpack 1.13.2
Time: 65ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.66 kB       0  [emitted]  main
   [0] ./src/index.js 113 bytes {0} [built] [1 error]
   [1] ./src/styles/app.css 0 bytes [built] [failed]

ERROR in ./src/styles/app.css
Module parse failed: C:\Users\Will\Documents\_isaac\programming\postcss-template\src\styles\app.css Unexpected character '@' (12:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (12:0)
    at Parser.pp$4.raise (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.parse (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:515:10)
    at Object.parse (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
 @ ./src/index.js 2:0-27

$webpack--watch./src/index.js./public/bundle.js
哈希：7d7eb727fa9ce93aed07
版本：网页1.13.2
时间：65毫秒
资产大小块块名称
bundle.js 1.66 kB 0[emissed]main
[0]。/src/index.js 113字节{0}[builded][1错误]
[1] ./src/styles/app.css 0字节[构建][失败]
./src/styles/app.css中出错
模块分析失败：C:\Users\Will\Documents\\u isaac\programming\postsss template\src\styles\app.css意外字符“@”（12:0）
您可能需要适当的加载程序来处理此文件类型。
语法错误：意外字符“@”（12:0）
在Parser.pp$4.raise（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:2221:15）
在Parser.pp$7.getTokenFromCode（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:2756:10）
位于Parser.pp$7.readToken（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:2477:17）
位于Parser.pp$7.nextToken（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:2468:15）
在Parser.parse（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:515:10）
在Object.parse（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:3098:39）
在Parser.parse（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\lib\Parser.js:902:15）
在DependenciesBlock。（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\lib\NormalModule.js:104:16）
在DependenciesBlock.onModuleBuild（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\webpack core\lib\NormalModuleMixin.js:310:10）
在下一个加载程序（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\webpack core\lib\NormalModuleMixin.js:275:25）
在C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\webpack core\lib\NormalModuleMixin.js:259:5
在Storage.finished（C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\enhanced resolve\lib\CachedInputFileSystem.js:38:16）
在C:\Users\Will\Documents\\u isaac\programming\postsss template\node\u modules\webpack\node\u modules\enhanced resolve\node\u modules\generable fs\generable fs.js:78:16
在FSReqWrap.readFileAfterClose[完成时]（fs.js:380:3）
@./src/index.js 2:0-27

此错误的原因是什么？我应该如何解决它？
您是否安装了必要的装载机
npm安装样式加载器css加载器postss加载器——保存dev
如果它们已经作为
devdependences
列在你的
包中。json
，删除你的
node\u modules
文件夹并重新执行
npm i
。另外，我记不起在哪里读过它，但是
ExtractTextPlugin.extract（）
应仅用于最终生产版本，而不用于开发（使用
网页包时--请观看
）。在webpack配置中加入一些逻辑，以便在dev和prod配置之间切换。我使用这样的东西：
{…loader:IS_PROD？ExtractTextPlugin.extract（'style'，'css！postsss'）：'style！css！postsss'，…}
其中
var是_PROD=（process.env.NODE_env=='production'）
并使用
NODE_ENV=production webpack
运行它进行生产构建，或使用
webpack——观察开发过程。嗨@Isaac Bell，我在webpack2中遇到了相同的错误，您是否找到了修复方法？是否安装了必要的加载程序
npm安装样式加载器css加载器postss加载器——保存dev
如果它们已经作为
devdependences
列在你的
包中。json
，删除你的
node\u modules
文件夹并重新执行
npm i
。另外，我记不起在哪里读过它，但是
ExtractTextPlugin.extract（）
应仅用于最终生产版本，而不用于开发（使用
网页包时--请观看
）。在webpack配置中加入一些逻辑，以便在dev和prod配置之间切换。我使用这样的东西：
{…loader:IS_PROD？ExtractTextPlugin.extract（'style'，'css！postsss'）：'style！css！postsss'，…}
其中
var是_PROD=（process.env.NODE_env=='production'）
并使用
NODE_ENV=production webpack
运行它以进行生产构建，或者使用
webpack--观察开发过程。嗨@Isaac Bell，我在webpack2中遇到了相同的错误，你知道如何修复它吗？