让我的软件包位于非根文件夹中

我使用webpack创建了一个使用react的网站。让我的软件包位于非根文件夹中

目前我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自动更新时，我改变我的脚本？我细

来源

2016-02-04 Øyvind Bråthen

您可以使用output.publicPath告诉从那里提供给您的捆绑文件的WebPack开发服务器。

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

webpack.config.js

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

来源

2016-02-04 14:40:38 dreyescat

publicPath取得了诀窍。谢谢！ –

这样的配置：

var path = require('path'); 

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

还可以确保在一个相对于这个路径文件夹的地点理想，你的WebPack配置。

P.S.还可以看看浏览器同步而不是dev-server模块。因为它调用所有的装载机等，并支持热模块等。

P.S.2。从的WebPack开发服务器official page

It will not be written to your configured output directory

所以我建议你使用浏览器插件异步获取相同的功能。

你可以找到一个例子here

来源

2016-02-04 09:54:30 deeptowncitizen

当我使用'path.join'时，我得到了完全相同的问题。我的webpack.config位于我的项目根文件夹中，而dist是我的根文件夹的子文件夹。 –

更新了答案 – deeptowncitizen

如果您想拥有比其他路线不同的地方bundle.js，我发现，你可以把整个路径文件名。

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

来源

2016-06-01 21:44:52

让我的软件包位于非根文件夹中

回答

相关问题