javascript - 如何将 webpack 配置为 "serve"现有开发站点？

Question

我实际上不知道要用谷歌搜索什么，因为我不知道这个术语，也不知道你怎么称呼这个过程。

基本上，我有一个开发站点:http://mylocalwebdev.test，它是用 CodeIgniter 编写的，我正在尝试创建一个页面 http://mylocalwebdev.test/image-switcher-demo 使用 React 开发的前端。 (这基本上就是我对React和webpack的实践)

所以，我已经创建了我的 webpack 配置，它可以生成 bundle.js，现在我想使用 webpack-dev-server 进行实时开发.现在，我对在我的配置路径中的 config -> output -> publicPath 中放入什么感到困惑:

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

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/index.js",
    output: {
        path: DIST_DIR,
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        rules: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;

有人可以帮忙吗？你怎么称呼这个过程？

问候，

Answer 1

输出仅用于捆绑过程(因此您可以部署代码)，webpack-dev-server 通过内存文件提供内容，您只需要使用此对象进行设置:

devServer: {
    contentBase: publicPath,
    compress: true,
    hot: true,
    historyApiFallback: true,
    port: 8080
}

查看此链接以获得更多选项:https://webpack.js.org/configuration/dev-server/