Собираем проект VueJS 2.0 с помощью Webpack 2.0

Ромчик
0

Собираем проект VueJS 2.0 с помощью Webpack 2.0

Доброго времени суток. В данной статье мы рассмотрим, как собрать компоненты VueJs 2.0, которые расположены в разных файлах в один с помощью Webpack 2.0. Для этого мы создадим проект VueJs, создадим компонет VueJs, пропишем конфигурацию для Webpack и соберем все в один файл. И так приступим.

У меня установлен OpenServer, настроен виртуальный хост vue.loc. Установлен Node.js версии 6.3.1

Версия NodeJS

Установлен npm версии 4.5.0

Версия npm

Как установить node.js и npm я описывать не буду. Это все хорошо описано в документации.

Все файлы, которые приведены в статье можно скачать по ссылке в конце статьи.

Создание файла package.json

У нас есть пустая папка, т.е. чистый проект.

Чистый проект (пустая папка)

Создадим в ней package.json. Для этого в Windows открываем PowerShell. Если у вас Linux или MacOS, то открываем терминал. И переходим в папку с проектом. Вводим команду:


npm init --yes

Создание файла package.json

Файл создан открываем его на редактирование и вставляем в него следующий код:


{

    "name": "vue.loc",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {
        "vue": "*",
        "vue-router": "*"
    },
    "devDependencies": {
        "webpack": "*",
        "vue-loader": "*",
        "buble": "*",
        "buble-loader": "*",
        "html-webpack-plugin": "*",
        "css-loader": "*",
        "vue-template-compiler": "*"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

Сохраняем.

Установка пакетов через npm

Теперь давайте установим пакеты. Для этого в PowerShell (в терминале) вводим команду


npm i

Установка пакетов через npm

Обратите внимание, что команду для установки пакетов мы выполняем в каталоге нашего проекта. Ждем!

Все пакеты установлены.

Теперь мы можем приступить к созданию проекта.

Создание файлов проекта

Первое мы создадим файл index.html с html-разметкой


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    
<h1>Test</h1>


<div id="app">

    </div>

</body>
</html>

И создадим файл main.js – это главный файл.


import Vue from './node_modules/vue/dist/vue.js'

new Vue({
    el: "#app",
})

В первой строке мы импортируем vue из node_modules/vue/dist/vue.js, а дальше создаем его экземпляр.

Теперь нам нужно создать компонент VueJs

Создание компонента VueJS

В каталоге с нашим проектом создадим подкаталог components и в нем создадим файл Hello.vue.


<template>
    
<h2>{{ msg }}</h2>

</template>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20module.exports%20%3D%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20'%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82'%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20scope%3E%0A%20%20%20%20h2%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20green%3B%0A%20%20%20%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />


Файл состоит из трех секций: шаблона, описание компонента и стилей.

Теперь нам необходимо подключить только, что созданный компонент к нашему главному файлу main.js. Открываем файл main.js в редакторе и изменяем код:


import Vue from './node_modules/vue/dist/vue.js'
import hello from './components/hello.vue'

new Vue({
    el: "#app",
    components: {
        hello: hello
    }
})

Теперь нам необходимо описать конфигурацию для webpack.

Файл конфигурации webpack

Давайте в каталоге нашего проекта создадим подкаталог config и в нем создадим файл webpack.config.js


module.exports = {
    module: { 
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
}

Эта конфигурация обязательна. Мы указываем webpack через какие loader-ы обрабатывать наши файлы.

Сохраняем. Осталось в файле package.json прописать скрипт.

Скрипт для сбора проекта VueJS через webpack

Открываем файл package.json и секцию «scripts» добавляем


…

"build": "webpack --config config/webpack.config.js main.js build.js"

…

Вот как теперь выглядит наш файл:


{
    "name": "vue.loc",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config config/webpack.config.js main.js build.js"
    },
    "dependencies": {
        "vue": "*",
        "vue-router": "*"
    },
    "devDependencies": {
        "webpack": "*",
        "vue-loader": "*",
        "buble": "*",
        "buble-loader": "*",
        "html-webpack-plugin": "*",
        "css-loader": "*",
        "vue-template-compiler": "*"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

Все мы готовы к сборке нашего проекта

Сборка проекта VueJs через webpack

Выполняем в PowerShell для Windows или терминале для UNIX-подобных систем следующую команду:


npm run build

Сборка проекта VueJs через webpack

Все проект собран. На выходе мы получили один файл build.js

Собранный проект VueJS

Осталось в файл index.html подключить скомпилированный файл и вставить VueJs компонент.

Для этого меняем код index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    
<h1>Test</h1>


<div id="app">
        <hello></hello>
    </div>

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22build.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>

Сохраняем.

Проверяем. Переходим по адресу vue.loc

Проверка работы проекта с VueJS

Заключение.

Мы с вами установили VueJs и Webcack через npm (причем, если вы обратили внимание, не привязываясь к версии). Дальше мы создали компонент VueJs и поместили его в отдельный файл. А затем настроили webpack для сборки VueJS (конфиг вынесли в отдельный файл). Собрали все компоненты в один файл с помощью webpack. Скомпилированный файл подключили к html файлу и вывели VueJs компонент.

Все файлы вы можете скачать с bitbucket

Чтобы не пропустить выхода новых статей подписываемя: VK, twitter, facebook. И канал на youtube
Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2020 По всем вопросам обращайтесь через форму обратной связиПолитика конфиденциальности

Яндекс.Метрика