Сборка многоканального проекта vue2 vue-router2 webpack3

JavaScript Vue.js CSS Webpack
Сборка многоканального проекта vue2 vue-router2 webpack3

"Создать проект vue2 vue-router2 webpack3 с нуля"Подробно представлены этапы строительного проекта, в основном в этой статье рассказывается, как на этой основе преобразовать его в многоподъездный.

Множественная запись означает, что запись элемента конфигурации веб-пакета настроена как массив или объект, содержащий несколько ключей, то есть MPA (множественные точки входа).При каких обстоятельствах будет настроено несколько записей? Как правило, большая часть vue используется как SPA (одна точка входа), потому что SPA может лучше взаимодействовать с vue-router, поэтому я лично думаю о нескольких возможных сценариях.Ниже мы объединим предполагаемые сценарии, чтобы объяснить, как настроить.

Адрес на гитхабе:GitHub.com/Учитесь сами/…

сцена одна ветвьmpa1Сценарий 2 соответствует веткеmpa2

сцена первая

Интерфейсная страница и внутренняя страница управления объединены, а структура каталогов выглядит следующим образом (обновлено в каталоге проекта «Создание проекта vue2 vue-router2 webpack3 с нуля»).

mpa1
|---- build
|---- src
      |---- admin   // 后台管理
      |     |---- views
      |     |---- app.vue
      |     |---- main.js
      |     |---- router.js
      |
      |---- web     // 移动端
            |---- views
            |---- app.vue
            |---- main.js
            |---- router.js

Конечно, его тоже можно рассматривать как два независимых модуля, в каждом из которых есть набор front-end роутинга, но между модулями много общедоступных сторонних библиотек. Для этой структуры мы ожидаем, что окончательная производственная сборка достигнет следующего:

  1. Модули, общие как для сети, так и для администратора (такие как vue, vue-router, axios и т. д.), упакованы как vendor.js, а код загрузки модуля веб-пакета, извлеченный из vendor.js, — manifest.js;
  2. Сторонние библиотеки, представленные web и admin, упакованы в web-vendor.js и admin-vendor.js соответственно;
  3. Соответствующие бизнес-коды web и admin упакованы в web.js и admin.js соответственно;
  4. CSS сторонних библиотек, представленных web и admin, упакованы в web-vendor.css и admin-vendor.css соответственно;
  5. Соответствующие CSS-коды web и admin упакованы в web.css и admin.css соответственно;
  6. Веб-страницы и страницы администратора (index.html) генерируются соответственно, и соответственно вводятся зависимые css и js.

Вышеуказанные объекты представлены каталогами следующим образом.

mpa1
|---- src
|---- dist
      |---- web
      |     |---- index.html 
      |
      |---- admin
      |     |---- index.html 
      |
      |---- assets
            |---- js
            |     |---- manifest.js
            |     |---- vendor.js
            |     |---- web-vendor.js
            |     |---- admin-vendor.js
            |     |---- web.js
            |     |---- admin.js
            |
            |---- css
                  |---- web-vendor.css
                  |---- admin-vendor.css
                  |---- web.css
                  |---- admin.css

Давайте начнем шаг за шагом настраивать конфигурацию и, наконец, достигнем всех вышеперечисленных целей.

добавить запись

Во-первых, конечно, вы хотите добавить вход и веб-администратора в webpack.base.config.js.

entry: {
    web: path.resolve(__dirname, '../src/web/main.js'),
    admin: path.resolve(__dirname, '../src/admin/main.js')
}

Конфигурация извлечения JS

Независимо от того, извлекаете ли вы общие модули каждой записи (например, vue, vue-router) или извлекаете сторонние библиотеки, представленные web и admin, вам нужно использовать только плагин webpack.optimize.CommonsChunkPlugin, который поставляется с webpack.

Во-первых, извлеките сторонние модули, представленные веб-сайтом и администратором поставщику.

[
    new webpack.optimize.CommonsChunkPlugin({
        name: 'web-vendor',
        chunks: ['web'],
        minChunks: function (module) {
            return module.context && module.context.indexOf("node_modules") !== -1;
        }
    }),

    new webpack.optimize.CommonsChunkPlugin({
        name: 'admin-vendor',
        chunks: ['admin'],
        minChunks: function (module) {
            return module.context && module.context.indexOf("node_modules") !== -1;
        }
    })
]

Затем извлеките общие модули в web-vendor и admin-vendor в качестве поставщика.

[
    // ...
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        chunks: ['admin-vendor', 'web-vendor']
    })
]

Наконец, извлеките код для части загрузки модуля webpack в файле vendor.

[
    // ...
    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: ['vendor']
    })
]

Конфигурация извлечения CSS

Извлечение CSS использует плагин Extract-Text-Webpack-plugin. Но конфигурация не должна быть такой сложной.

[
    new ExtractTextPlugin({
        allChunks: true,
        filename: "css/[name].css?[contenthash:8]"
    })
]

Итак, как извлечь CSS из сторонних библиотек, представленных в Интернете и администратором? На самом деле он завершается, когда web-vendor и admin-vendor настроены выше.

Создать домашнюю страницу записи

Сгенерированная страница использует html-webpack-plugin. В отличие от одиночной записи, блоки необходимо настраивать вручную, блоки настраивают «модуль» (чанк), от которого зависит каждая запись.

[
    new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, `../dist/web/index.html`),
        template: 'index.tpl.html',
        chunks: ['manifest', 'vendor', 'web-vendor', 'web'],
        inject: true
    }),
    new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, `../dist/admin/index.html`),
        template: 'index.tpl.html',
        chunks: ['manifest', 'vendor', 'admin-vendor', 'admin'],
        inject: true
    })
]

Выше приведена вся конфигурация, отвечающая всем целям сборки, которых мы надеемся достичь. Вы можете попробовать адрес github, указанный в начале статьи о git clone,Примечание для переключения на ветку mpa1.

сцена вторая

Вместо end-to-end роутинга используется back-end роутинг, а страница может быть php, jsp, aspx, и таких ситуаций в реальной разработке много. Это немного похоже на использование общей библиотеки загрузки модулей (seajs, requirejs), и каждая страница должна вводить свои собственные зависимости. Структура каталогов следующая.

mpa2
|---- build
|---- src
      |---- css
      |---- images
      |---- pages
            |---- moduleA
            |     |---- index.vue
            |     |---- index.js
            |
            |---- moduleB
            |     |---- index.vue
            |     |---- index.js
            |
            |---- moduleC
                  |---- index.vue
                  |---- index.js

Для этой структуры цель сборки аналогична сценарию 1 следующим образом.

  1. Сторонние библиотеки, представленные каждым модулем, упакованы в vendor.js, а код загрузки модуля веб-пакета в vendor.js извлекается как manifest.js;
  2. Собственные js каждого модуля упакованы в moduleA.js, moduleB.js и moduleC.js;
  3. CSS сторонней библиотеки, представленной каждым модулем, упакован в vendor.css;
  4. CSS каждого модуля упакован в moduleA.css, moduleB.css, moduleC.css;
  5. Каждая страница модуля (index.html) генерируется отдельно, и страница соответственно вводит зависимые css и js.

добавить запись

entry: {
    moduleA: resolve('../src/pages/moduleA/index.js'),
    moduleB: resolve('../src/pages/moduleB/index.js'),
    moduleC: resolve('../src/pages/moduleC/index.js')
}

Когда у вас много модулей, их определенно непросто поддерживать, вы можете написать функцию для их генерации самостоятельно.

Конфигурация извлечения JS

[
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        chunks: ['moduleA', 'moduleB', 'moduleC'],
        minChunks: function (module) {
            return module.context && module.context.indexOf("node_modules") !== -1;
        }
    }),

    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: ['vendor']
    })
]

Как только извлечение css будет таким же, как и сцена, это не будет объяснено.

Создать домашнюю страницу записи

Здесь я изменил генерацию страницы на генерацию функции.

var isProd = process.env.NODE_ENV === "production";

exports.genHtmlPlugins = function () {

    var baseWebpackConfig = require('./webpack.base.config');
    var path = require('path')
    var plugins = [];
    Object.keys(baseWebpackConfig.entry).forEach(function (name) {
        plugins.push(
            new HtmlWebpackPlugin({
                filename: isProd ? path.resolve(__dirname, `../dist/${name}/index.html`) : `${name}/index.html`,
                template: 'index.tpl.html',
                chunks: isProd ? ['manifest','vendor', name] : [name],
                inject: true
            }))
    })
    return plugins
}

Вышеупомянутая функция различает текущую среду.В среде разработки имя файла настроено как入口名/index.htmlСоответствующие адреса доступаhttp://localhost:8090/moduleA/, в режиме разработки CommonsChunkPlugin не нужен, поэтому есть только один чанк, а в продакшн-сборках нужно указывать чанк.

Окончательная построенная структура каталогов выглядит следующим образом.

mpa2
|---- src
|---- dist
      |---- moduleA
      |     |---- index.html 
      |
      |---- moduleB
      |     |---- index.html 
      |
      |---- moduleC
      |     |---- index.html 
      |
      |---- assets
            |---- js
            |     |---- manifest.js
            |     |---- vendor.js
            |     |---- moduleA.js
            |     |---- moduleB.js
            |     |---- moduleC.js
            |
            |---- css
                  |---- vendor.css
                  |---- moduleA.css
                  |---- moduleB.css
                  |---- moduleC.css

Суммировать

Конфигурации двух приведенных выше сценариев аналогичны, фактически два плагина CommonsChunkPlugin и HtmlWebpackPlugin используются для выполнения того, что вы хотите.

Категории