Question

我使用react创建了webpack的网站。

目前我的webpack.config.js看起来像这样：

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

module.exports = {
  entry: './scripts/main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'  
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query:{
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

然后我使用webpack-dev-server --progress --colors启动开发服务器，每当我更改javascript文件时，我的网页都会刷新，一切似乎都正常。但是，我希望我的bundle.js文件驻留在除根文件夹之外的其他文件夹中。因此，我将行path: __dirname,更改为path: __dirname + '/dist',。

现在，当我对脚本文件进行更改时，捆绑包不会自动更新，但如果我手动运行webpack命令，它就会生成。所以我的问题是：将bundle.js文件放在dist文件夹中的正确方法是什么，当我对脚本进行更改时仍然会让webpack-dev-server自动更新？

Answer 1

您可以使用output.publicPath告诉webpack dev服务器从哪里提供捆绑文件。

Webpack Dev Server还从publicPath中获取提示，使用它来确定从哪里提供输出文件。

<强> webpack.config.js

output: {
  path: __dirname + '/dist',
  filename: 'bundle.js',
  publicPath: '/dist/'
},

Answer 2

如果你想让bundle.js在路由以外的其他地方，我发现你可以将整个路径放在文件名中。

output: {
  path: __dirname + '/public',
  filename: 'static/assets/script/app.bundle.js'
},

Answer 3

对我这样的配置很好：

var path = require('path');

output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].js"
},

还要确保您的webpack配置位于此路径文件夹的相对位置。

P.S。另请参阅 browser-sync 而不是dev-server模块。因为它调用所有加载器等，并支持热模块等。

P.S.2。来自webpack dev服务器official page

It will not be written to your configured output directory

所以我建议你使用browser-async插件来获得相同的功能。

您可以找到示例here

将我的包放在非根文件夹

3 个答案: