В этом курсе мы настроим шаблон Webpack 4, подключим babel 7, а также разберемся с webpack dev server. Подключим js библиотеки на примере vue.js и bootstrap, настроим loaders. Ниже более полное видео по Webpack dev server и настройки babel7, в статье мы пробежимся по основным моментам из видео.
Что важно понимать?
Для начала нужно поговорить про отличия gulp и webpack. Во превых в вебпаке есть точка входа в которую мы складируем все наши библиотеки, скрипты, css файлы и так далее. В галпе такого файла нету это не очень удобно.
Как это делается в галпе: когда вы хотите установить или подключить библиотеку нужно останавливать сервер и прописывать библиотеку в общий конфиг в строгой последовательности , далее снова запускать сервер. Может показаться простым, но представьте теперь, что у вас 6 библиотек и вам самим нужно думать в какой последовательности их подключить чтобы они нормально взаимодействовали между собой или, наоборот - никак друг с другом не пересекались. Это уже настоящая боль.
Что в этом плане делает вебпак? Вы все также устанавливаете библиотеку через нпм. Далее вам не нужно останавливать сервер и следовать четкому порядку вебпак сам все подключит и сделает это правильно, раставив в конечном файле app.js все библиотеки в нужном порядке.
Вебпак собирается в разы быстрее благородя входной точке js и тому, что папку dist вебпак хранит в памяти, в отличии от других сборщиков, которым нужно собирать каждый раз эту папку по новой.
Исходя из этих отличий выбор очевиден - webpack. Но если вы новичок, которому все выше сказанное показалось белым шумом - лучше начать с галпа. В таком случае, спустя какое-то время, когда вы пересядете на вебпак - вы почувствуете всю его силу и мощь!
В консоли: npm init
далее нужно следовать тому, что скажет npm либо просто набрать npm init -y
в таком случае, неприхотливый нпм согласиться со всем не раздумывая.
В консоли:
npm install webpack webpack-cli webpack-dev-server path --save-dev
Эта команда установит все необходимые пакеты для дальнейшей работы
После этого в файле package.json
появится следующее:
"devDependencies": {
"webpack": "^4.27.1",
"path": "^0.12.7",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
Теперь можно создать 2 ярлыка для сборки и дев разработки. В файле package.json
описываем эти ярлыки:
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
Опишем начальный конфиг в файле webpack.config.js который нужно создать.
const path = require('path')
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist'),
publicPath: '/dist'
},
devServer: {
overlay: true
},
}
В файле index.html
также нужно прописать путь к нашему app.js
<script src="/dist/app.js"></script>
Теперь создадим точку входа, про которую говорили выше. для этого создадим папку src в которой будет файл index.js
это и есть наша точка входа (пока что единственная). Подключим в нее сторонний срипт common.js
и создадим его в новой папке js
.
Файл index.js
будет выглядить так:
import './js/common'
Файл common.js
(который мы импортируем из папки js) будет следующим:
let add = (a,b) => a+b
console.log(add(2,6))
То есть - обычная стрелочная функция, которая в дальнейшем перекомпилируется в ES4 или ES5 (по желанию) и сделаем это для того, чтобы наш код работал даже в старике IE или базовом браузере мозилы.
Babel это js компилятор, который позволяет перегонять новый синтаксис js в старый. Потому что иначе, если этого не сделать, то наш супер навороченный код отвалиться в половине браузеров.
Для установки в консоли пропишем
npm install @babel/core @babel/preset-env babel-loader —save-dev
В конфигурациях вебпака прописываем
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/'
}]
}
В этом регулярном выражении мы обрабатываем все js файлы через. babel-loader при этом исключая папку node_modules
Теперь создаем файл .babelrc в который прописываем
{
"presets": [
"@babel/preset-env"
]
}
Вот и все, теперь наш js код обрабатывается бейблом и перегоняется в старый, валидный, синтаксис.
Исходный код из видео: https://github.com/vedees/webpack-template
Если вам нравятся материалы на сайте, вы можете помочь. Средства пойдут на оплату сервера, на котором функционирует сайт, а также на продвижение ресурса и корм коту!