Эссе по построению фреймворка внешнего интерфейса проекта --- Webpack наступает на яму

JavaScript CSS Webpack внешний фреймворк

Я знаю только, как писать и использовать Webpack. . Лидер поручил построить каркас проекта мобильного терминала. . .

Я в это время:


Хотя мы ничего не знаем о Webpack, мы должны вести себя прилично.

«Большой брат, какой UI-фреймворк мы используем для мобильных устройств?»

«Нам придется подумать об этом через несколько дней. Может быть, мы напишем свой собственный сет».

Вот моя мотивация: UI-фреймворк? Разве это не то, о чем я всегда мечтал создавать UI-фреймворки?

"Хороший босс. Должен выполнить задание"


Умело открывайте PowerShell, хорошо справьтесь с формированием шаблонов vue и настройте несколько страниц в соответствии с руководством.

Хорошо, следующая проблема:


Этот метод конфигурации поддерживает только самые основные многостраничные файлы! !

Что это значит?Если я создам папку паспорта в src/page. Поместив в него одноименный файл html js vue, создайте папку reg под папкой с паспортом, и поместите в нее одноименную структуру страницы. Это приведет к тому, что reg.html не удастся упаковать.

Подумайте об этом, такого рода проблемы обычноподстановочный знакпричина. Возможно, подстановочный знак недостаточно глубок.

Но взглянул на папку конфигурации, связанную с webpack. . Сразу испугался. . .

Что это за вещи. . . Что представляет собой каждый файл? .



Так что я провел полдня, царапая его сам. Вот об этом (на фото)

1.build.js //Основной инструмент упаковки webpack.
2.webpack.*.conf.js //Независимая конфигурация среды и конфигурация плагина webpack. Например, производственная среда, тестовая среда и т. д. Обычно один файл на среду
2.webpack.base.conf.js //Настройте псевдоним каталога проекта, в котором упакован и настроен файл ресурсов (src/assets)

3.*.env.js //Где настроить приватные переменные среды проекта

4.index.js //Настройте путь к файлу ресурсов после упаковки проекта, номер порта среды разработки и место конфигурации сервера


Хорошо, после того, как мы разобрались с архитектурой веб-пакета, давайте проверим гипотезу.

Конечно же, после настройки нескольких страниц. Фрагмент кода в учебнике ищет js/html, как это




(Извините, я забыл нарисовать стрелки на первой картинке)


Это действительно шаблонный способ найти JS-страницу. Итак, изменено на /**/*.js, /**/*.html. реально решить проблему


Хорошо, теперь мы наконец нашли нашу подстраницу уровня 2. Но есть проблема с упаковкой. Такие как

Перед упаковкой:


После упаковки:


Очень хорошая вторичная страница становится основной страницей


Тогда я не могу получить доступ к паспорту/reg.html?


Конечно, такого рода проблемы не могут быть допущены. Поэтому я решил решить эту проблему.

Итак, я нашел эту строку кода в файле utils.js:


Смысл этого кода в том, чтобы найти последний «/» абсолютного пути и последний «.» после него для перехвата имени файла. Затем упакуйте его

интересно. Эквивалентно тому, что если мой каталог D:/demo/src/page/index/index.js, он перехватит index.

Если мой каталог D:/demo/src/page/passport/reg/reg.js, он будет перехватывать только reg. Это приведет к тому, что выходной файл будет в том же каталоге.

Найдите причину, затем устраните ее.

Так что подумайте о другом способе мышления: поскольку все мои страницы находятся в папке src/page. Затем я нахожу «/» после страницы и перехватываю его до последнего «.», чтобы у него была иерархическая связь? ?

Итак, код в этом:

let filename = filePath.substring(filePath.indexOf("pages") + 6, filePath.lastIndexOf('.'))

Смысл этого кода в том, чтобы сначала найти нижний индекс «страниц», а затем +6 нижних индексов, чтобы найти «/» после страниц. Наконец сократить до последнего "."

Таким образом, вывод страницы регистрации:

/passport/reg/reg


ОК. Теперь снова упакуйте его и обнаружите, что уровень каталога, наконец, правильный.



Теперь, наконец, структура проекта выглядит так. Но старший брат недоволен:

«Таким образом, вы помещаете файлы css и js в тот же каталог, что и html. Не позволяйте им находиться в отдельных папках»

какие? ? Что за чертовщина? ?

После просмотра упакованные файлы ресурсов помещаются в статическую папку. Следуя подсказкам, я обнаружил атрибут, похожий на конфигурацию каталога ресурсов.

    assetsSubDirectory: 'static', 

Поэтому я заменил его на:

  assetsSubDirectory: '',

После упаковки таким образом обнаруживается, что папка css js находится на том же уровне, что и папка страницы? ?


Это грязнее, чем раньше. .



Так что я долго искал,Относительный путь вывода js/css находится в файле webpack.*.conf.js.



Общий смысл этого кода заключается в выводе упакованного файла в соответствии с шаблоном имени файла css/js. Но добавьте путь к папке впереди, он также автоматически создаст папку


Поэтому удалите css/ и js/. успешное решение проблем


так счастлив! ! Структура проекта теперь должна быть нормальной.


Позвольте мне сбежать и посмотреть. . Эм. . Как картинка выбежала из того же уровня, что и папка страницы? ?


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


Посмотрев, кто использует свойство «assetsSubDirectory», я обнаружилCopyWebpackPluginплагин веб-пакета

new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: config.dev.assetsSubDirectory,
    ignore: ['.*']
  }
])

Ознакомьтесь с документацией по веб-пакету. Что делает плагин,Скопируйте папку ресурсов вашего проекта без изменений в папку в каталоге упаковки.

Тогда это решится, я напишу мертвым, и скоро все будет в порядке.

to: './static'

Упаковано таким образом, ресурсы и код в норме. Чувство небольшого чувства достижения




В это время начальник снова заговорил:

«В нашей системе много сред. У разных сред разные шлюзы»

Это поставило меня в тупик. . После более внимательного просмотра в конце,По сути, это уникальная константа, разная для каждой среды. . Удобные адреса интерфейса, не нужно писать доменные имена. Просто получите глобальный шлюз + путь напрямую


Поэтому я сделал разные копии для каждой среды.webpack.*.conf.js ,*.env.js. Где *.env.js — частные константы среды хранения

*.env.js настроен следующим образом:

'use strict'
const merge = require('webpack-merge')

module.exports = {
  NODE_ENV: '"development"', //区别线上环境/生产环境的变量
  SERVER_URL: '" **** "', //网关。通常用于接口域名配置
  IS_DEBUG: true //是否允许开启Vue Tools
}


потомwebpack.*.conf.js необходимо настроить:

const env = require('../config/dev.env');


Таким образом, вы можете получить глобальные константы в своем собственном коде.

Пример:

<template>
  <div class="aaa">
    <span>
    这是index {{getBaseURL}}
    </span>
  </div>
</template>

<script>
  export default {
    name: "index",
    computed: {
      getBaseURL() {
        return process.env.SERVER_URL; //返回网关地址
      }
    }
  }
</script>

<style scoped>
  .aaa {
    color: red;
  }
</style>


Тогда страница правильно отображает адрес шлюза.


Слишком далеко. Основная часть всего каркаса проекта завершена. После завершения сборки я также знаю примерно половину вебпака. …

Конечно, на более позднем этапе я также опишу опыт производства фреймворка пользовательского интерфейса. Спасибо всем за вашу поддержку!


Поправки приветствуются, если есть ошибки!


Справочные ресурсы:

Создание многостраничных приложений с помощью vue

китайская документация webpack


Категории