如何配置 Webpack？答案

【问题标题】：How to configure Webpack?如何配置 Webpack？
【发布时间】：2017-07-20 17:33:31
【问题描述】：

我需要编译sass和jade。

我找到了 sass 的一个选项，但它不起作用。仅在启动时编译。

我尝试了这些命令：

webpack-dev-server --watch-poll
webpack-dev-server
--watch webpack-dev-server

但它只有在这样的命令之后才能编译：

网页包

const path = require('path');    
const webpack = require('webpack');    

module.exports = {
               entry: './src/index.js',
               output: {
                   filename: 'main.js',
                   path: path.resolve(__dirname, 'dist'),
                   publicPath: '/',
                   sourceMapFilename: '[name].map'
               },
               devtool: "source-map",
               devServer: {
                   hot: true, // Tell the dev-server we're using HMR
                   contentBase: path.resolve(__dirname, 'dist'),
                   publicPath: '/'
               },
               module: {
                   loaders: [
                       {
                           test: /\.css$/,
                           loader: "style-loader!css-loader"
                       }, {
                           test: /\.sass$/,
                           loaders: ['style-loader', 'css-loader', 'sass-loader']
                       }
                   ]
               }    
};

我该如何解决我的问题？

【问题讨论】：

@CodyG。如果使用此命令，浏览器将不会有更新。

标签： javascript web npm webpack development-environment

【解决方案1】：

您对sass 文件的测试应该可以很好地从sass 编译到css。我建议首先尝试删除您对css 的单独测试，因为您的sass 测试应该已经编译为css，而额外的css 测试可能会破坏某些东西。

因此，请为您的 module 部分尝试此配置：

module: {
  loaders: [
    {
      test: /\.sass$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

【讨论】：