編輯在一個服務器端應用程序的webpack觀看文件後webpack v3的CSS加載器錯誤

我正在建立一個節點通過反應和CSS模塊（每個組件內的一個CSS文件直接導入到零件）。反應輸出將與renderToStaticMarkup()一起序列化，該請求將在JSON響應中發送回請求者。我也打算在這個迴應中發送編譯好的CSS。編輯在一個服務器端應用程序的webpack觀看文件後webpack v3的CSS加載器錯誤

我有一個通過webpack工作的構建過程，它將我的服務器應用程序捆綁到一個文件。我目前也正在將我的CSS（模塊）捆綁到一個文件中（以後要閱讀這個文件）。

我使用與其手錶設施的WebPack如下（如API需要POST不能使用的WebPack-dev的服務器並沒有「頁」反正更新）：

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

我的問題然而，雖然這一切工作良好的第一次編譯，只要我改變任何文件，我得到一個webpack錯誤，指出我需要一個適當的加載器導入CSS文件。

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

我儘可能簡化了我的webpack配置，但仍然遇到問題。我簡單的配置（沒有解壓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;

所以我的問題是，爲什麼在第一次編譯這項工作好嗎但沒有在更改後重新編譯？

來源

2017-09-27 Geoff Ford

比小說更奇怪！

所以我意識到，如果我不觀察者運行我的體型......

cross-env NODE_ENV=development webpack --colors

而該過程已經結束，如果我編輯的文件我還是看到了錯誤！即使有人認爲沒有觀察員在跑。我沒有運行進程就離開了那個終端窗口，打開了另一個終端並使用vi在我的src目錄中編輯了一個文件（如果它有一些奇怪的觀察者運行，關閉WebStorm）。令人難以置信的是，在原始終端窗口中再次彈出錯誤！

所以看來我的問題是由一個流氓webpack手錶過程造成的，這個過程並沒有被正確殺死。無法找到手動殺死它的過程，因此必須重新啓動。在這個討厭的問題上丟失了幾個小時。至少我的整個構建過程再次運行。

來源

2017-09-28 12:11:56

編輯在一個服務器端應用程序的webpack觀看文件後webpack v3的CSS加載器錯誤

回答

相關問題