时间戳

首页 > 解决方案 > Webpack：如何自动将导入的文件包含到构建目录中？

javascript - Webpack：如何自动将导入的文件包含到构建目录中？

问题描述

我几乎没有使用 Webpack 的经验。

由于某种原因，Webpack 不会自动将文件引用包含require()到 dist 目录（生产构建）中。

我目前正在重构这个文件./public/quickViewWindow.html：https ://github.com/aleksey-hoffman/sigma-file-manager/blob/main/public/quickViewWindow.html

在其中，我正在导入此文件../src/utils/sharedUtils.js： https ://github.com/aleksey-hoffman/sigma-file-manager/blob/main/src/utils/sharedUtils.js

如下：

<body>
  <div id="content-container"></div>
  <script type="module">
    const sharedUtils = require('../src/utils/sharedUtils')
    ...

它在开发中工作，但在生产版本中不工作：

Uncaught Error: Cannot find module '../src/utils/sharedUtils'
Require stack:
- C:\Users\AL\AppData\Local\Programs\sigma-file-manager\resources\app.asar\quickViewWindow.html

在控制台中运行此代码（生产构建）：

console.log(require('fs').readdirSync(__dirname))

表明 Webpack 确实不包含该./src/utils/sharedUtils.js文件：

0: "0e7fe195a8e2c74bd1f0.worker.js"
1: "0e7fe195a8e2c74bd1f0.worker.js.map"
2: "253bb5a8f9e801b6d940.worker.js"
3: "253bb5a8f9e801b6d940.worker.js.map"
4: "58082cc4c1c8cb1b52e4.worker.js"
5: "58082cc4c1c8cb1b52e4.worker.js.map"
6: "background.js"
7: "background.js.LICENSE.txt"
8: "configs"
9: "css"
10: "errorWindow.html"
11: "fonts"
12: "game"
13: "icons"
14: "img"
15: "index.bundle.js"
16: "index.bundle.js.map"
17: "index.html"
18: "js"
19: "node_modules"
20: "package.json"
21: "quickViewWindow.html"
22: "resources"
23: "server"
24: "trashManagerWindow.html"

这是 Webpack 配置文件：

https://github.com/aleksey-hoffman/sigma-file-manager/blob/main/vue.config.js

如您所见，经过一些小的修改，我使用由electron-builder-plugin样板（应用程序基于）指定的默认配置值

更新：

我用以下代码修复了它，但我不确定这是否是正确的方法：

const CopyPlugin = require('copy-webpack-plugin')
...
  configureWebpack: {
    plugins: [
      new CopyPlugin([
        {from: './src', to: 'src'}
      ])
    ]
  }

另一个问题是，如果我import使用 ES6 语法而不是相同的模块require()，它会抛出：Unexpected token 'export'.

似乎 Webpack / Babel 根本没有处理./public目录中的文件。

标签： javascriptnode.jswebpackelectron

解决方案

推荐阅读