Question

我最近从Webpack 3升级到4.

这是我的webpack.dev.js文件：

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'public/bundle.js'
    },

预期行为

应该在bundle.js文件夹中创建public。

实际行为

它正在名为main.js

的文件夹中创建dist文件

结论

由于某种原因，输出不再正常工作。

问题

我应该如何生成文件名？

这是我运行的脚本：

"scripts": {
    "watch": "./node_modules/.bin/webpack --mode development --watch --progress",
},

Answer 1

每the doc：

开箱即用webpack不会要求你提供配置文件，它会假设你的项目的入口点是 src / index ，并将输出结果 dist / main.js 缩小并优化生产。

通常您的项目需要扩展此功能，为此您可以在根文件夹中创建 webpack.config.js 文件，webpack将自动使用它。

因此，您的文件名为 webpack.dev.js ，因此webpack不会自动获取该文件。您需要在监视脚本中指定它。

"scripts": {
  "watch": "./node_modules/.bin/webpack --mode development --watch --progress --config webpack.dev.js",
},

您可以通过更改这样的配置来简化您的观看脚本：

// package.json
"scripts": {
  "watch": "webpack --progress --config webpack.dev.js",
},

// webpack.dev.js
const path = require('path');
module.exports = {
    watch: true,
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
};

Webpack 4 - 输出没有在正确的位置创建bundle.js.

1 个答案: