使用Webpack时，我的服务器可以静态服务于哪个文件夹？

Question

假设我想（我的老板让我）使用webpack，我的文件结构如下：

在哪里builds是webpack输出捆绑/编译src文件夹的结果，然后如何使index.html指向bundle.js如果服务器上存在该文件夹），即我通过express.static()公开哪个文件夹？ 用下面的简单webpack.config来执行此操作的正确“ webpack”方法是什么？ 我是否缺少有关此工作原理的基本信息？ 理想情况下，我想在index.html执行以下操作

<html>
<script src='bundle.js'></script> 
<!-- bundle.js spits a bunch of CSS into the html, dynamically builds elements, etc -->
</html>

还是那不是在Webpack中完成事情的方式？

webpack.config.js

module.exports = {
    entry:  './src/index.js',
    output: {
        path:     'builds',
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            { test: /\.css$/, 
              loader: "style!css" 
            }
        ]
    }
};

我已经尝试通过docs和这篇经常链接的文章来解决这个问题。

Answer 1

由于不给最终用户公开任何目录结构是一种很好的做法，因为它为网络开发创造了机会，因此带有express的nodejs具有一种机制来处理这种情况。 您可以做的是通过这种方式公开您的Webpack

app.use('/buidscript', express.static(__dirname + '/builds/'));

然后，来自/buidscript/bundle.js所有浏览器请求/buidscript/bundle.js将自动从您的build目录中获取。

<script src='/buidscript/bundle.js'></script>

现在，您可以根据自己的想法收集想法，以任何方式实现它。

寻找您理想的情况

app.use(express.static(__dirname + '/builds'));

现在您可以使用

<script src='bundle.js'></script>

因为任何请求bundle.js都将在暴露的静态构建目录中进行搜索

将其添加到package.json的脚本中

“scripts”: {
 “start”: “webpack-dev-server --content-base build/ --inline --hot”,
 ...
 }
// Use it by running 
$ npm start

现在，这将在开发模式下运行index.html之前构建您的bundle.js。

--content-base build/

将在您的构建文件夹中存储静态文件。 因此，您可以直接使用bundle.js。 它将查找任何文件更改并重新编译bundle.js

使用Webpack时，我的服务器可以静态服务于哪个文件夹？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-24 03:21:24

使用Webpack时，我的服务器可以静态服务于哪个文件夹？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-24 03:21:24

解决方案1
0 已采纳 2016-09-24 03:21:24