Каждый раз, когда я пытался узнать о скриптах сборки, упаковщиках или других штуках javascript, у меня возникали проблемы с поиском руководств, в которых не требовалось настраивать все.
Когда вы учитесь, вам не нужно настраивать приложение React/Redux с тестами Sass, Flow и Jest. Иногда хочется просто делать что-то одно.
Это руководство посвящено настройке проекта Webpack, и мы сделаем только минимально возможное.
Webpack — это упаковщик. Все ваши файлы Javascript, HTML, CSS, Sass, JSX или другие файлы будут объединены предпочтительно в один или два файла.
Помимо возможности использовать такие технологии, как Sass или React, Webpack позволяет легко делить файлы и использовать синтаксис модулей ES6, например:
import myThing from './myThing.js'
Установка
Чтобы установить Webpack, просто запустите:
npm install webpack -g
Файл конфигурации
Просто иметь Webpack недостаточно. В вашем проекте вам понадобится файл webpack.config.js. Здесь вы объясняете webpack, что вы хотите, чтобы он делал.
Я начну со структуры файла, которая выглядит следующим образом:
Начнем с невероятно простого примера:
module.exports = {
entry: './src/app.js', // This tells webpack where to start
output: {
filename: './build/bundle.js' // This tells webpack the output
}
};
На всякий случай, если вы раньше не видели синтаксис module.exports, вам следует ознакомиться с документацией по модулям для Node:
Давайте попробуем!
Попробуйте запустить $ webpack в командной строке в папке вашего проекта. (Обратите внимание, что я использую $ для обозначения того, что это должно быть запущено из командной строки; не включайте $ в свою команду). Вы увидите что-то вроде:
Вы должны заметить, что webpack создал для нас папку build с файлом bundle.js внутри. На данный момент вам не нужно беспокоиться о коде, который он сгенерировал для вас.
Давайте сделаем что-нибудь.
Создайте новый файл с именем hello.js в той же папке, что и ваш app.js .
В этом файле давайте определим функцию, а затем экспортируем ее.
// src/hello.js
function myFunction() {
console.log("Hello Webpack!")
}
module.exports = myFunction
Затем в вашем app.js давайте require эту функцию и вызовем ее.
// src/app.js
var myFunction = require('./hello.js')
myFunction();
Если мы сейчас запустим $ webpack, то увидим, что наш код перемешан с кучей вещей, которые мы не писали.
Теперь немного HTML.
Хотя следующая часть не является лучшей практикой (мы вернемся к тому, как правильно это сделать, в другой раз), давайте создадим файл index.html в папке build.
Внутри этого файла давайте просто включим наш скрипт в одну строку.
<!-- build/index.html --> <script src="bundle.js"></script>
В моем случае я включил только тег сценария. Большинство браузеров в любом случае будут включать в себя все остальные теги html и body, поэтому, играя таким образом, нам не нужно беспокоиться о них.
Если вы откроете этот файл в Chrome и откроете инструменты разработчика с помощью cmd-opt-i на Mac или ctrl-shift-i на Windows, вы должны увидеть наш вывод console.log в консоли!
Возникли проблемы? Весь код, который я использовал, доступен на Github.
