Vue CLI v3. Как узнать, какие JS-файлы должны быть разбиты на отдельные файлы? - PullRequest
Новая
       71

Vue CLI v3. Как узнать, какие JS-файлы должны быть разбиты на отдельные файлы?

0 голосов
/ 06 ноября 2018

У меня трудные времена, когда я думаю о новом CLI и конфигурации. В официальной документации я не смог найти ничего о CSS и о том, как добавить его в качестве точки входа и не импортировать его непосредственно в компонент или файл main.js.

Я понял, что некоторые JS-файлы разбиваются на отдельные файлы, начиная с main.js, а остальные компилируются, где предполагается - в app.js.

Мне было интересно, как он узнает в фоновом режиме, что должно быть сохранено как "vendor" для JS, но когда я пытаюсь импортировать некоторые файлы SASS "vendor" в main.js, это не так, и он объединяет все внутри один app.css файл.

Может кто-нибудь сказать мне, как можно создать / изменить vue.config.js и сообщить сборщику, что я также хочу, чтобы app.scss была точкой входа, а vendor.scss - другой точкой входа.

Я не уверен, каковы наилучшие методы для этой цели, но я всегда делал это с моей собственной конфигурацией веб-пакета ...

Частичный пример ниже: 

entry: {
    vendor: [
        './styles/vendor.scss',
        './scripts/vendor.js'
    ],
    app: [
        './styles/app.scss',
        './scripts/app.js'
    ]
}

РЕДАКТИРОВАТЬ # 1

Я думаю, что получил первый ...

"Как он узнает, что следует разбивать на части в файлах" vendor "?

  • Что бы ни импортировалось из node_modules, оно разбивается на куски.

Что я еще не понял, так это ... Что если у меня есть личный каталог assets/styles/vendor, в котором я @import храню эти файлы SASS из NPM и выполняю некоторые изменения переменных или чего-то еще.

При импорте этого файла в main.js в этом случае не происходит разбиение на части ... Поэтому должен быть способ сообщить бандлеру, что я хочу, чтобы все в этом каталоге или в файле vendor.scss, куда все импортируется, быть отрезанным.

РЕДАКТИРОВАТЬ # 2

Я подумал, что могу использовать волшебные комментарии WebPack для импорта файла SCSS основного поставщика, например:

import(/* webpackChunkName: "vendor" */ './assets/styles/vendor.scss')

У меня нет проблем с этим, но, видимо, это делает пакет. Также генерируется пустой файл vendor.[hash].js.

РЕДАКТИРОВАТЬ # 3

Я провел дальнейшие исследования и узнал, что есть команда vue inspect, которая выводит конфигурацию веб-пакета.

Так что при настройке на vue.config.js мы можем посмотреть вывод этой командой, если есть ошибка или что-то работает не так, как ожидалось.

Более того, я узнал, что, если мы укажем entry непосредственно в нашем vue.config.js файле, мы получим ошибку, которую entry нельзя указать в нашем файле конфигурации.

Следующее запрещено, но это то, чего я на самом деле хочу достичь ... 

// vue.config.js
module.exports = {
  entry: {
    app: [
      './src/main.js',
      './src/assets/styles/app.scss'
    ],
    vendor: [
      './src/assets/styles/vendor.scss'
    ]
  }
}

Фактически, правильный способ сделать это будет ответом на мой собственный вопрос ...

1 Ответ

0 голосов
/ 06 ноября 2018

Способ достижения этого - использование Chain API в WebPack.

Однако, если я все сделал правильно, я все еще вижу проблему сгенерированного файла vendor.[hash].js с некоторым шаблоном модуля WebPack. Этот файл JS также внедряется в шаблон index.html.

Что приводит к тому же результату, что и попытка моей РЕДАКТИРОВАТЬ # 2 , за исключением того, что мы больше не импортируем наши файлы Sass в main.js

Чтобы изменить точки входа для моей цели этого вопроса, мы можем сделать это следующим образом: 

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .entry('app')
        .add('./src/assets/styles/app.scss')
        .end()
      .entry('vendor')
        .add('./src/assets/styles/vendor.scss')
      .end()
  }
}

Примечание

Мы не указываем JS-файл записи app, который по умолчанию будет main.js, поскольку мы не переопределяем текущую точку входа. Вместо этого мы расширяем его, поэтому все работает как положено.

UPDATE

Пока WebPack не разрешит это в будущих основных выпусках, я обнаружил отличный пакет - fqborges / webpack-fix-style-only-records . Это решает проблему, с которой я столкнулся, и я бы предложил вам ее использовать.

Окончательная конфигурация будет выглядеть так: 

const FixStyleOnlyEntries = require('webpack-fix-style-only-entries')

module.exports = {
  chainWebpack: config => {
    config
      .entry('app')
        .add('./src/assets/styles/app.scss')
        .end()
      .entry('vendor')
        .add('./src/assets/styles/vendor.scss')
      .end()
  },

  configureWebpack: {
    plugins: [
      new FixStyleOnlyEntries()
    ]
  }
}

ОБНОВЛЕНИЕ № 2

После дальнейшего изучения и использования такой конфигурации для проектов я понял, что должен использовать !important в стилях, где мне нужно было переопределить все, что связано vendor.

Это просто потому, что WebPack вставит app до vendor (как JS, так и CSS), и это вызовет такую ​​проблему.

Даже если мы изменим конфигурацию сверху и переместим запись app ниже записи vendor, она все равно не будет выполнена. Причина в том, что мы изменяем точку входа, которая уже существует по умолчанию в vue-cli config. Мы добавляем больше записей в app и добавляем новую запись vendor.

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

const FixStyleOnlyEntries = require('webpack-fix-style-only-entries')

module.exports = {
  chainWebpack: config => {
    config.entryPoints.delete('app')

    config
      .entry('vendor')
        .add('./src/assets/styles/vendor.scss')
      .end()
      .entry('app')
        .add('./src/main.js')
        .add('./src/assets/styles/app.scss')
      .end()
  },

  configureWebpack: {
    plugins: [
      new FixStyleOnlyEntries()
    ]
  }
}
...