Question

我有一个简单的应用程序使用webpack来编译我的js，其中有一个入口点为./src/app.js和输出为./public/dist/app.bundle.js。

以前输出目录 ./dist/app.bundle.js

在webpack --watch模式下，每当我对src代码进行一些修改时，它会生成旧路径./dist/app.bundle.js该文件以及新目录？请告诉我有什么问题

webpack.config.js

var path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/app.js"),

    output: {
        path: path.resolve(__dirname),
        filename: "./public/dist/app.bundle.js",
        publicPath: "/public/",
    }
};

npm -v 3.10.10

node -v v6.10.2

webpack：3.10.0

Answer 1

var path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/app.js"),

    output: {
        path: path.resolve(__dirname, "public/dist"),
        filename: "app.bundle.js",
        publicPath: "dist",
    }
};

output.filename
指定磁盘上每个输出文件的名称。你不能在这里指定绝对路径！ output.path选项确定磁盘上写入文件的位置。 filename仅用于命名单个文件。

output.path
输出目录作为绝对路径（必需）。

output.publicPath
publicPath指定在浏览器中引用时输出文件的公共URL地址。对于嵌入<script>或<link>标记或引用资源（如图片）的加载程序，publicPath用作文件的href或url()，当它们与文件不同时磁盘上的位置（由path指定）。当您想要在不同的域或CDN上托管部分或全部输出文件时，这会很有用。 Webpack Dev Server还使用它来确定期望从中提供输出文件的路径。

请参阅文档here

Answer 2

调整output中的webpack.config配置，如下所示。

var path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/app.js"),

    output: {
        path: path.resolve(__dirname, "public/dist"),
        filename: "[name].bundle.js",
        publicPath: "/public/",
    }
};

参考：Webpack Output

为什么webpack仍会生成旧的目录包文件？

2 个答案: