Установка Webpack, Babel, LESS на виртуальный хостинг

Дата публикации 13.06.2018

Речь об удобной организации работы с Javascript иCSS.

Я хочу иметь возможность для разработки разносить логические модули по отдельным файлам, использовать возможности ES6 и LESS, но при этом, чтобы на продакшен подключать только один суммарный файл (js, css), его имя менялось при внесении изменений (чтобы обновлять кеш), при этом, чтобы мне не приходилось вручную менять название файла в шаблоне. Для полноты ощущений еще добавим Autiprefixer.

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

Для решения поставленной задачи сперва потребуется локально установить NodeJS.

1. Заходим на официальный сайт https://nodejs.org/dist/latest/ и ищем там похожий файл, подходящий к нашей версии операционной системы.

Узнать версию можно выполнив команду:

cat /etc/*-release

//ответ
CentOS release 6.9 (Final)

Узнать разрядность:

uname -m

//ответ
x86_64

Видно, что подходит файл node-v10.4.1-linux-x64.tar.gz. Загружаем его в корень домашней директории:

wget https://nodejs.org/dist/latest/node-v10.4.1-linux-x64.tar.gz

Распаковываем:

tar -xvzf node-v10.4.1-linux-x64.tar.gz

Архив больше не понадобится, его можно удалить.

Добавляем путь к бинарникам NodeJS в переменную $PATH. Для этого создаем файл .bashrc:

nano .bashrc

и пишем в него:

export PATH=~/node-v10.4.1-linux-x64/bin:$PATH

Теперь нужно, чтобы этот файл читался при логине в системе. Для этого создаем файл

nano .bash_profile

и пишем в него

if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

ОК. Теперь нужно закрыть сессию и снова войти. Проверяем, что NodeJS виден:

node -v
npm -v

Если в ответ выводятся версии программ, то все установилось.

 

Теперь нужно инициализироваь проект с NodeJS (здесь -y нужно, чтобы не отвечать на излишние вопросы):

npm init -y

После этого в корневой директории появится файл package.json

Далее ставим нужные модули:

npm install webpack webpack-cli --save-dev

//на момент написания babel устанавливался так:
npm install babel-core babel-loader babel-preset-env babel-cli --save-dev
//сейчас, сентябрь 2018, так:
npm install -D babel-loader @babel/core @babel/preset-env @babel/cli --save-dev

npm install css-loader style-loader --save-dev
npm install less node-less less-loader --save-dev
npm install mini-css-extract-plugin --save-dev
npm install html-webpack-plugin --save-dev
npm install postcss-loader --save-dev
npm install autoprefixer --save-dev

 

Переходим к конфигурированию. В package.json добавить в секцию scripts два режима работы webpack: dev - для разработки и build для продакшен

"dev": "webpack --mode development",
"build": "webpack --mode production"

Для простоты всю конфигурацию мы будем делать в файле webpack.config.js

Я возьму некий сферический сайт в вакууме и предположу, что исходники у нас лежат в директории src в корне домашней папки, домашняя папка - директоия www, а результат сборки - в папке шабонов с именем sk-temp. Пути к шаблонам типичные для ЮМИ.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ["./src/js/main.js", "./src/styles/main.less"],
  output: {
	publicPath: '/',
    path: path.join(__dirname, "/www"),
    filename: "templates/sk-temp/assets/js/[name].[chunkhash].js"
  },
  devtool: "source-map",
  //watch: true,
  module: {
    rules: [
	{
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: 'env'
          }
        }
      },
	  
      {
        test: /\.less$/,	  
		use:  [  
			'style-loader', 
			MiniCssExtractPlugin.loader, 
			'css-loader', 
			{
				loader: 'postcss-loader',
				options: {
					plugins: [
						autoprefixer({
							browsers:['ie >= 11', 'last 2 version']
						})
					],
					sourceMap: true
				}
			},
			'less-loader'
		]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/webpack-gen.xml',
      filename: 'templates/sk-temp/xslt/layouts/webpack-gen.xml'
    }),
	new MiniCssExtractPlugin({
		filename: "templates/sk-temp/assets/css/[name].[chunkhash].css",
		chunkFilename: "[name].css"
	})
  ]
};

Здесь закомментирована инструкция watch, потому что на REG.RU, где я проверял конфигурацию, при включенном мониторинге перестает отвечать web-сервер. Почему - не разбирался, думаю, на более вменяемом хостинге такой проблемы не будет. Напомню, что по моему опыту наилучшим выбором в России являются два хостера: Timeweb - хорошее качество услуг, доступ по SSH всегда (а не по требованию, как на Spaceweb), вход в phpmyadmin без необходимости вводить пароль на каждый чих, плюс низкие цены на VDS (по российским меркам низкие, конечно); второй хостер - beget, он дает NodeJS из коробки.

В шаблоне src/webpack-gen.xml подключаем файлы скриптов и стилей, так, как они будут видны в ЮМИ:

<?xml version="1.0" encoding="utf-8"?>
<assets>
<link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>" />
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</assets>

Обработанный файл будет помещен в templates/sk-temp/xslt/layouts/webpack-gen.xml. При каждом изменении исходников ссылка на скрипты будет меняться, примрно так:



Теперь надо подключить его к шаблону ЮМИ. Поскольку мы предусмотрительно поместили webpack-gen.xml в одну папку с xslt-шаблонами, то в нужном месте вставляем команду:

<xsl:copy-of select="document('webpack-gen.xml')/assets/node()"/>

Теперь можно запускать сборку:

npm run dev

Здесь dev - это имя девелоперской сборки (dev и build), которые мы добавляли в package.json