Question

想在源文件的位置位于各种路径下的情况下，热运行webpack dev服务器。我一直在尝试适当地配置它。下面是我的源路径：

/
/node_modules
/config
   --> webpack.config.js
   --> webpack.dev.config.js
/app
   --> index.js
/static 
   --> index.html
   --> /images

这里的主要事情是所有JS和SASS文件都在/ app下，而index.html和静态文件（例如图片）在/ static下。下面是我的脚本：

webpack-dev-server --config config/webpack.dev.config.js --mode development --open --hot --history-api-fallback --progress --colors --env.PLATFORM=development

以下是我的webpack.dev.config.js文件的摘要：

devServer: {
    contentBase: path.join(__dirname, '../app'),
    compress: true,
    port: 8080,
    historyApiFallback: true,
    publicPath: path.join(__dirname, '../static')
},
module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader'                        
                },
                {
                    loader: 'sass-loader',
                    options: {
                        includePaths: path.join(__dirname, '../app')
                    }
                }
            ]      
        },
        {
            test: /\.js$/,
            exclude: [/node_modules/],
            use: [{
                loader: 'babel-loader'
            }]
        }
    ]
},
plugins: [
    new HtmlWebpackPlugin({ 
      template: path.join(__dirname, '../static') + 'index.html',
      filename: path.join(__dirname, '../../wwwroot') + 'index.html'
    })
}

我想确保我可以运行此程序（在/ app中对SASS或JS的任何更改以及/ static中的任何更改都可以在浏览器刷新中看到）。任何帮助将不胜感激。

Webpack开发服务器和不同的源文件路径

0 个答案: