Webpack 开发服务器 - 在更改时导出 .CSS 文件答案

【问题标题】：Webpack dev server - exporting .CSS file on changeWebpack 开发服务器 - 在更改时导出 .CSS 文件
【发布时间】：2016-08-21 22:08:25
【问题描述】：

我正在使用 webpack 将 .SASS 构建到一个 .CSS 文件中，但它仅在我在终端中“webpack”时才会导出文件。当我运行“webpack-dev-server”时，它会看到更改，但不会生成/更改输出 .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”就可以完全正常工作，但我想知道如何让它使用服务器生成文件，这样我每次更改样式时都不必在终端中输入。

【问题讨论】：

webpack-dev-server 从内存而不是文件系统生成文件和服务。
ExtractTextPlugin需要添加style-loader：ExtractTextPlugin.extract('style', 'css!sass')
嗯，它会渲染文件但不会将其放入目录中。这是终端的截图：i.imgur.com/OJGrpKY.png
没关系，因为webpack-dev-server是凭记忆提供的。
我意识到我的最后一个问题听起来多么愚蠢。这一切都有效！谢谢！

标签： css sass webpack webpack-dev-server

【解决方案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

【讨论】：