Question

现在我的webpack.config.js文件如下所示：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
};

当我加载http://localhost:8080时，一切看起来都很好，如果我编辑src/index.js，浏览器会重新加载，并且更改会得到反映。

但是要使所有这些正常工作，我需要使用html-webpack-plugin，该文件会在我的index.html指令的根目录下生成一个dist文件。该文件的内容很简单：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

我不知道这与我要实现的目标如何配合。基本上，我不想创建SPA，也不想编写自定义JS框架，而该框架既没有路由也没有完成

我想要的是这样组织我的代码：

/src

    /login
        /index.js
        /index.html
        /index.css

    /user
        /index.js
        /index.html
        /index.css

        /profile
            /index.js
            /index.html
            /index.css

在上面的示例中，文件夹login，user和user/profile都是组成部分。我只想通过分别输入以下内容即可在浏览器中访问它们：

http://localhost:8080/login
http://localhost:8080/user
http://localhost:8080/user/profile

输入这些内容应将index.html文件加载到每个组件的目录中，该目录又应在标记中引用index.js和index.css。我不想制作单个页面的应用程序，但是当页面之间单击链接时，这些应用程序将被“硬加载”。

我如何安排我的webpack配置文件以允许这样做？显然，无论何时更改任何文件，我都还需要重新加载dev服务器。

如何为非SPA设置webpack开发服务器？

0 个答案: