Заблуждение Webpack

одна вещь, чтобы понять заранее, что webpack не пачки файлов при помощи fs или другие модули, которые запрашивают путь к файлу. Этот тип активов обычно обозначается как Статический Активов, поскольку они никоим образом не связаны. webpack только пачки файлов required или imported (ES6). Кроме того, в зависимости от вашего webpack конфигурация, ваш корень проекта может не всегда соответствовать тому, что выводится внутри вашей продукции строит.

на основе документации electron-vue Структура Проекта / Дерево Файлов, вы найдете, что только webpack связки и static/ каталог доступны в производственных сборках. electron-vue также имеет удобный __static глобальная переменная, которая может указать путь к этому в рамках разработки и производства. Вы можете использовать эту переменную аналогично тому, как это было бы с __dirname и path.join to доступ к файлам JSON, или действительно любые файлы.

решение для статических активов

кажется, текущая версия electron-vue boilerplate уже решил это для вас, но я собираюсь описать, как это настроено с webpack как он может применяться не только к файлам JSON и как он также может применяться для любого webpack + electron настройка. Следующее решение предполагает ваш webpack сборки в отдельную папку, которую мы будем использовать dist/ в этом случае, предполагает, что ваша webpack конфигурация находится в корневом каталоге вашего проекта и предполагает process.env.NODE_ENV установлено значение development во время разработки.

на static/ каталог

во время разработки нам нужно место для хранения наших статических активов, поэтому давайте разместим их в каталоге под названием static/. Здесь мы можем поместить файлы, такие как JSONs, которые нам нужно будет прочитать с помощью fs или какой-либо другой модуль, который требует полного пути к файлу.

теперь мы нужно сделать это static/ каталог ресурсов в производстве строит.

но webpack не обрабатывает эту папку вообще, что мы можем сделать?

давайте использовать простой copy-webpack-plugin. Внутри нашего webpack файл конфигурации, мы можем добавить этот плагин при строительстве для производства и настройте его для копирования .

new CopyWebpackPlugin([
    {
      from: path.join(__dirname, '/static'),
      to: path.join(__dirname, '/dist/static'),
      ignore: ['.*']
    }
])

Итак, активы находятся в производстве, но как получить путь к этой папке как в разработке, так и в производстве?

создание глобального __static переменная

какой смысл делать это __static переменной?

1. используя __dirname не является надежным в webpack + electron настройки. Во время разработки __dirname мог бы быть в ссылке на каталог, который существует в вашем src/ файлы. В производстве, так как webpack связки наши src/ файлы в один скрипт, этот путь вы сформировали, чтобы добраться до static/ больше не существует. Кроме того, те файлы, которые вы положили внутрь src/ не было required или import Эд никогда не делает его к вашему строению продукции.

2. при обработке различий в структуре проекта от разработки и производства, пытаясь получить путь к static/ будет очень раздражать во время разработки, чтобы всегда проверять ваш process.env.NODE_ENV.

Итак, давайте упростим это, создав один источник истины.

с помощью webpack.DefinePlugin мы можем установить наш __static переменная только в развитии чтобы получить путь, который указывает на <projectRoot>/static/. В зависимости от того, есть ли у вас несколько webpack конфигурации, вы можете применить это как main и renderer настройки процесса.

new webpack.DefinePlugin({
    '__static': `"${path.join(__dirname, '/static').replace(/\/g, '\\')}"`
})

в производстве нам нужно установить __static переменной вручную в коде. Вот что мы можем сделать...

.HTML-код ()

<!-- Set `__static` path to static files in production -->
<script>
    if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\/g, '\\')
</script>
<!-- import webpack bundle -->

main.js (