Webpack開發服務器 - 導出.CSS文件更改

我正在使用webpack將.SASS生成一個.CSS文件，但它只在終端中輸入「webpack」時導出文件。當我運行「的WebPack-dev的服務器」，它看到的變化，但不生成/更改輸出.css文件：Webpack開發服務器 - 導出.CSS文件更改

var webpack = require('webpack'); 
var path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
     'webpack-dev-server/client?http://127.0.0.1:8080/', 
     'webpack/hot/only-dev-server', 
     './src' 
    ], 
    output: { 
     path: path.join(__dirname, 'public'), 
     filename: 'bundle.js', // this exports the final .js file 
     publicPath: '/public' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] 
      }, 

      { 
       test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') // this loads SASS 
      } 

     ] 
    }, 

    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new ExtractTextPlugin("./bundle.css") //this exports the CSS file 
    ], 

    resolve: { 
     modulesDirectories: ['node_modules', 'src'], 
     extensions: ['', '.js', '.scss'], 
     root: [path.join(__dirname, './src')] 
    } 
};

它的工作原理完全罰款只是「的WebPack」但我不知道如何使它使用服務器生成文件，以便每次更改樣式時都不必輸入終端。

來源

2016-04-27 Vlady Veselinov

'的WebPack-DEV-server'生成文件和內存供應，而不是從文件系統。 –

您需要將'style-loader'添加到ExtractTextPlugin：'ExtractTextPlugin.extract（'style'，'css！sass'）' –

嗯，它會呈現文件但不會將其放入目錄中。這裏是終端的屏幕截圖：http://i.imgur.com/OJGrpKY.png –

-1

這完全沒問題。 webpack-dev-server不寫入磁盤。它僅從內存提供。這就是爲什麼終端顯示：

Project is running at http://localhost:9000/ webpack output is served from/ Content not from webpack is served from /Users/dd/Desktop/apps/webpack-starter/dist

來源

2017-05-11 02:34:29

Webpack開發服務器 - 導出.CSS文件更改

回答

相關問題