2017-09-27 49 views
2

反応モジュールとCSSモジュールを経由してビューを構築しているノードexpress apiで作業しています。成分)。反応出力はrenderToStaticMarkup()でシリアル化され、JSON応答でリクエスターに返されます。私はこの応答でもコンパイルされたCSSを送るつもりです。サーバ側のアプリケーションでwebpack監視ファイルを編集した後、webpack v3でCSSローダーエラーが発生しました

webpackを使用してサーバーアプリケーションを1つのファイルにバンドルする作業プロセスがあります。私は現在、CSS(モジュール)を1つのファイルにまとめています(これについては後で読む予定です)。

次のように私は(APIはPOSTを必要とし、とにかく更新する「ページ」は存在しないとのWebPACK-devのサーバーを使用することはできません)そのウォッチの機能とのWebPACKを使用しています:

cross-env NODE_ENV=development webpack -w --colors 

私の問題しかし、これは最初のコンパイル時にはうまくいきますが、ファイルを変更すると、インポートしたCSSファイルに適切なローダーが必要であるというWebpackエラーが発生します。

ERROR in ./src/app/components/Suggestions/Suggestions.css 
Module parse failed: /home/me/myproject/src/app/components/Suggestions/Suggestions.css Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| .suggestions { 
|  background: blue; 
|  color: orange; 
@ ./src/app/components/Suggestions/Suggestions.js 11:19-47 
@ ./src/app/components/Suggestions/index.js 
@ ./src/server/middleware/buildSuggestions.js 
@ ./src/server/routes/index.js 
@ ./src/server/server.js 
@ multi babel-polyfill ./src/server/server.js 

可能な限りウェブパックの設定を簡略化していますが、引き続き問題が発生します。私の単純化された設定(ファイルへのCSSなしPostCSSを抽出していない)、次のとおりです。

webpack.config.babel.js

import path from 'path'; 
import nodeExternals from 'webpack-node-externals'; 

import PATHS from './config/paths'; 

// Host and port settings to spawn the dev server on 
const HOST = 'localhost'; 
const PORT = 3000; 
const LOCAL = `http://${HOST}:${PORT}`; 
const DEV = process.env.NODE_ENV === 'development'; 

let serverConfig = { 
    entry: [ 
    "babel-polyfill", 
    path.resolve(PATHS.src, 'server/server.js'), 
    ], 

    output: { 
    filename: 'server.js', 
    path: PATHS.dist, 
    publicPath: '/' 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     include: PATHS.src, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      // babelrc at project root only for compiling this webpack 
      babelrc: false, 
      presets: [ 
       'env', 
       'react' 
      ], 
      plugins: [ 
       'transform-object-rest-spread', 
       'syntax-dynamic-import', 
       'transform-class-properties', 
      ] 
      } 
     } 
     }, 
     { 
     test: /\.css$/, 
      use: [ 
      { 
       loader : 'css-loader', 
       options: { 
       modules: true, 
       importLoaders: 1, 
       localIdentName: '[local]-[hash:base64]', 
       sourceMap: DEV 
       }, 
      } 
      ] 
     } 
    ], 
    }, 

    plugins: [ 
    ], 

    target: 'node', 
    externals: [nodeExternals()] 
}; 

export default serverConfig; 

だから私の質問は、なぜこの作品は最初のコンパイルで大丈夫行い、あります変更後の再コンパイルではありませんか?

答えて

0

フィクションよりも見知らぬ人!

だから私は

cross-env NODE_ENV=development webpack --colors 

...私はウォッチャーなしで私のビルドを実行する場合ことに気づき、私は、私はまだエラーを見て、ファイルを編集した場合、そのプロセスは、終了していました!おそらくウォッチャーが走っていなかったのですが。私は実行中のプロセスなしでその端末ウィンドウだけを残し、別の端末を開き、viを使って自分のsrcディレクトリ内のファイルを編集しました。信じられないほど、エラーは元のターミナルウィンドウで再びポップアップしました!

だから、私の問題は、正しく殺されていない不正なWebpack監視プロセスが原因だったようです。手動でプロセスを終了させるプロセスが見つかりませんでしたので、再起動が必要でした。文字通り時間はこの奇妙な問題で失われました。少なくとも私の全体のビルドプロセスは再び働いています。

関連する問題