Ръководство за начинаещи за webpack - Как да стартирате основно приложение с webpack 2

Днес светът на уеб разработката е в разцвет с готини инструменти и пакети, които можете да използвате за своите уеб приложения. Някои важни части от които са групиране на вашите уеб приложения, обработка на минификация на файловете и свързаните с тях задачи за производство и не на последно място, презареждане на живо (ние ги обичаме ).

В миналото е имало много инструменти, през които уеб разработчиците са преминали. Gulp и Grunt биха били един от популярните инструменти, които уеб разработчиците (включително и мен) използват. Любимият ми беше Gulp btw;)

Напоследък станах голям фен на Webpack поради безпроблемните начини, по които работи и защото той не е просто изпълнител на задачи, но има страхотно управление на графика на зависимостта, което всъщност не беше нещо в повечето от предишните инструменти. Можете да прочетете повече за това кога да използвате уебпакет и защо тук. Още една причина да отидете за webpack е, защото някои от невероятните екипи като Angular преминаха към webpack заради невероятната му производителност и функции.

Да стигнем до бизнеса. Ръководството / ръководството предполага, че вече имате инсталиран NodeJS във вашата машина. Можете да проверите това, като стартирате във вашия терминал:

възел - преобразуване

Ако всяко нещо е наред, то трябва да отпечата нещо като `v7.7.1`.

Инсталация

Така че първо, нека да инсталираме „webpack“ и „webpack-dev-server“ (ще ни е нужен по-късно) в световен мащаб в нашата машина

npm install -g webpack webpack-dev-server
Обърнете внимание, че това не е препоръчителна практика. Инсталирането в глобален мащаб ви заключва към конкретна версия на уебпакет и може да се провали в проекти, които използват друга версия. Вижте уеб документи за подробности.

След това създайте папка <име-проект- име>. Ще използвам webpack-demo като папка за този урок

mkdir webpack-demo
cd webpack-demo

Създаване на проект

Можете да отворите тази папка в любимия си редактор. Моята е VSCode в наши дни. Създайте файл index.html и поставете следния код в него



  <Глава>
    
     Основно приложение с Webpack 
    
  
  <Тяло>
    

WebPack работи !!

       

След това създайте файла в текущата папка и поставете обикновен фрагмент на код вътре:

console.log ("Здравейте webpack. Демото работи");

Ще забележите, че сме включили bundle.js в нашия index.html, но тук сме създали main.js. Това е така, защото webpack ще свърже нашия js файл и ще създаде bundle.js файла в крайна сметка. Ще направим това, като изпълним командата

webpack main.js bundle.js

Това ще даде резултат като

Хеш: ec10d1136042776794c4
Версия: webpack 2.6.1
Време: 71ms
    Имена на размера на активите
bundle.js 2.65 kB 0 [излъчен] главен
   [0] ./main.js 19 байта {0} [построен]

Ако отворите index.html и отворите хромирания си грешка, ще изглежда така

Можете също да създадете css файл, както сме го включили в нашия index.html. Затова създайте main.css в корена на проекта си и добавете някои примерни стилове. Нека дадем на страницата сив фон и заглавието си син цвят

тяло {
  фон: #dcdcdc;
}
h1 {
  цвят: син;
}

Използване на конфигурационен файл за webpack

Можем да кажем на webpack какво да правим в конфигурационен файл webpack.config.js и това ще ни позволи да използваме командата webpack без да посочваме източника (main.js) и целта (bundle.js) и това става по-мощно, когато добавяме товарачи и други неща и още конфигурации. Ще разгледаме това по-късно.

Създайте файл webpack.config.js във вашия проект и добавете следния основен фрагмент към него:

module.exports = {
  запис: './main.js',
  изход: {
    име на файл: './bundle.js'
  }
};

Конфигурацията е доста проста. entry е файлът, който ще бъде коренът на вашата графика за зависимост и входния файл за webpack, където като изход съдържа името на изходния файл. И тогава използваме изходния файл в нашия index.html. Така че след като приключите с това, опитайте да стартирате командния уебпакет в корена на вашия проект от терминала. Трябва да получите същия изход като преди на конзолата.

Гледайте и надграждайте в движение

Можете да кажете на webpack да наблюдава вашите файлове и да стартира процеса на изграждане веднага щом нещо е променено във вашите файлове, като добавите watch: true в нашия webpack.config.js. Вашият файл трябва да изглежда така

module.exports = {
  запис: './main.js',
  изход: {
    име на файл: './bundle.js'
  }
  гледайте: вярно
};

Можете да стартирате commandwebpack сега и ако промените нещо в main.js, webpack ще прекомпилира и изгради bundle.js.

Сървър за разработка

Още готини неща. Тъй като отварянето index.html е твърде стара школа сега и ние сме в процес на презареждане на живо, докато се развиваме, можем да го направим просто като използваме webpack-dev-сървъра, който инсталирахме по-рано. Това идва с малко експресно приложение, така че просто предоставяте своя JavaScript файл и сте готови да започнете. Просто в своя корен на проекта от терминал, изпълнете командата по-долу

WebPACK-Dev-сървър

Бум! Вашият проект вече може да бъде видян на http: // localhost: 8080 / webpack-dev-server /

Удивителното е, че ако направите каквито и да е промени в main.js или main.css, сървърът ще се презареди активно и не е нужно да правите ctrl + R / command + R всеки път. Опитайте това!

товарачи

Товарачите могат да се разглеждат като задачи, каквито са били в други предишни инструменти. Те могат да се използват за извършване на неща като изискват () за зареждане на други модули и файлове. Webpack не включва товарачи извън кутията. И в никакъв случай не бива, защото ще стане много по-тежък. Въпреки това има много товарачи, които могат да бъдат инсталирани чрез npm или прежда. Ще използваме npm за този урок и ще използваме babel-loader за писане на някакъв ES6 код и ще използваме css-loader и style-loader за да импортираме файла на main.css вътре в main.js.

Отворете терминала от проекта root и изпълнете следните команди.

npm init -y
npm install --save-dev babel-loader babel-core babel-preset-env
npm install --save-dev css-loader-style loader

npm init -y създава package.json във вашия проект, който ще използваме, за да запазим зависимостите от развитието и да добавим товарачи към нашия проект.

npm install --save-dev babel-loader css-loader style-loader инсталира тези товарачи чрез npm и ги записва в папката node_modules в нашия проект.

Сега, за да работим с инсталираните товарачи, трябва да информираме нашия webpack.config.js, за да ги използваме при създаването на компилациите или по време на работа на уеб сървъра. Ще го направим, като променим нашия конфигурационен файл, както следва:

module.exports = {
  запис: './main.js',
  изход: {
    име на файл: './bundle.js'
  }
  гледайте: вярно,
  модул: {
    правила: [
    {
      тест: /\.css$/,
      употреба: [
        {loader: "style-loader"},
        {loader: "css-loader"}
      ]
    }, {
      тест: /\.js$/,
      изключете: / (node_modules | bower_components) /,
      използвайте: {
        товарач: „товарач-товарач“,
        настроики: {
          предварително зададени настройки: ['env']
        }
      }
    }]
  }
};

Сега можем да напишем ES6 код в нашия main.js, който ще се компилира до ES5. Променете съдържанието на файла main.js на следното

стил на импортиране от './main.css';
const appName = 'Демо приложение за Webpack';
setTimeout (
  () => предупреждение (`Благодаря за използването на $ {appName}`)
, 500);

Горният код ще бъде компилиран в ES5 javascript и ще бъде включен в bundle.js

За css можем да премахнем

Вижте също

Как и на каква възраст можем да започнем да учим детско програмиране? Как овладявате няколко езика за програмиране? Имам 0 $ и две седмици, за да правя пари онлайн. Какви са моите опции?покемон луна как да получите mewtwoКак мога да спечеля пари от реклама в интернет? Как мога да подобря уменията си за кодиране за кратък период от време? Как собственикът на уебсайт може да печели 100 долара на ден чрез Google AdSense? Колко мога да печеля от безплатни приложения, ако приложението ми бъде изтеглено 200 милиона пъти с всички активни потребители?