如何在webpack文件中创建一个src文件

ttcibm8c  于 2022-12-23  发布在  Webpack
关注(0)|答案(2)|浏览(170)

当我把“webpack”文件放在一个新的文件夹中,并在新的文件夹中提取它,我去“src”文件,然后去“VSCODE”的终端,并写“npm安装”后,“npm运行构建”,所以我可以看到“src”文件中的每一件事,复制在“dist”文件,但我的问题是:当我在“源代码”中创建一个新文件夹并在vscode中写入“npm运行构建”时,该新文件夹将不会在“dist”中构建。在“dist”文件夹中,只有“源代码”文件。我如何将我在“源代码”中创建的新文件夹放置在“dist”文件中。谢谢。我在“源代码”中创建了一个新文件夹,但在“dist”中看不到此文件

iqxoj9l9

iqxoj9l91#

默认情况下,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
2w2cym1i

2w2cym1i2#

    • 这是我从中得到的问题:**

如何配置webpack配置,以便在运行npm run build时处理在给定src文件夹中创建的新文件并将其移动到给定dist文件夹?

    • 解决方案:**

要使webpack识别新的源文件,您需要在webpack.config.js中创建一个新条目,或者需要将一些导出的函数从新文件导入到现有条目中。

    • 以下是一个示例方案:**

我有一个目录app,其中包含:x1米4英寸1x、x1米5英寸1x、x1米6英寸1x、x1米7英寸1x
当我运行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")
    },
}

但我想修改它,这样webpack就可以识别我的src/contact.js,并将其处理为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")
    },
}

如果需要进一步澄清答案,请发表意见。

相关问题