如何在 webpack 文件的 src 中創建一個文件

Question

當我將“webpack”文件放在一個新文件夾中並將其解壓縮到新文件夾中時，我轉到“src”文件然后轉到“VSCODE”的終端並在“npm run build”之后寫“npm install”所以我可以看到復制到“dist”文件中的“src”文件中的所有內容，但我的問題是：當我在“src”中創建一個新文件夾並在 vscode 中編寫“npm run build”時，該新文件夾不會構建在“距離”。 在“dist”文件夾中只有“src”文件。 我怎樣才能把我在“src”中創建的新文件夾放在“dist”文件中。 謝謝。 我在“src”中創建了一個新文件夾，但在“dist”中看不到這個文件

Answer 1

默認情況下，webpack 將使用src/index.js中的index.js文件。 這可能因 webpack 版本而異。

一般最好指定入口文件。 根據您的問題，我假設您正在嘗試將其他文件添加到 webpack 條目中，這些文件將由 webpack 解析和構建。

這是通過在 webpack.config.js 中定義附加條目來處理的https://webpack.js.org/concepts/entry-points/

module.exports = {
  ...
  entry: {
    main: './src/index.js',
    vendors: './src/vendors.js',
  },
  ...
};

在上面的示例中，webpack 將在dist/中生成兩個文件。

1. dist/main.js
2. dist/vendors.js

Answer 2

這是我從中得到的問題：

如何配置我的 webpack 配置，以便在運行npm run build時處理在給定src文件夾中創建的新文件並將其移動到給定的dist文件夾？

解決方案：

對於要被 webpack 識別的新源文件，您需要在 webpack.config.js 中創建一個新條目，或者您需要將一些導出的函數從新文件導入到現有條目中。

這是一個示例場景：

我有一個目錄app包含： app/src/ ， app/dist/ ， app/webpack.config.js ， app/src/index.js

當我運行npm run build時，會在我的app/dist文件夾中生成一個名為index.bundle.js的文件

我現在想要在運行npm run build時在我的app/dist文件夾中生成一個新腳本contact.bundle.js

我現有的webpack.cofig.js文件看起來像這樣：

module.exports = {
    entry: {
        index: "./src/index.js",
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
}

但我想修改它，所以現在我的src/contact.js被 webpack 識別並處理為dist/contact.bundle.js

所以我更新我的webpack.config.js文件如下：

module.exports = {
    entry: {
        index: "./src/index.js",
        contact: "./src/contact.js"
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
}

如果答案需要進一步澄清，請發表評論。