В этом руководстве мы создадим с нуля мощный начальный шаблон Webpack с добавленной поддержкой SCSS и интегрируем популярные CSS-фреймворки, Bootstrap и Tailwind CSS. Шаблон послужит прочной основой для проектов веб-разработки, объединения JavaScript, обработки SCSS и использования возможностей Bootstrap и Tailwind CSS для красивых пользовательских интерфейсов. К концу этого руководства у вас будет полнофункциональный начальный шаблон Webpack с поддержкой SCSS, Bootstrap и Tailwind CSS, готовый с легкостью запустить ваши веб-проекты.
Предпосылки
Прежде чем мы начнем, убедитесь, что на вашем компьютере установлено следующее:
- Node.js и npm (или Yarn): Вы можете скачать Node.js здесь.
Шаг 1: Настройка проекта
Давайте создадим новый каталог проекта и инициализируем новый проект Node.js.
mkdir webpack-starter-template cd webpack-starter-template npm init -y
Команда npm init -y инициализирует новый проект Node.js с настройками по умолчанию.
Шаг 2. Установите Webpack и необходимые зависимости
Далее давайте установим Webpack и другие необходимые для разработки зависимости для нашего проекта.
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin @babel/core @babel/preset-env babel-loader css-loader postcss-loader autoprefixer mini-css-extract-plugin sass-loader sass bootstrap tailwindcss normalize.css --save-dev
Эта команда устанавливает последние версии Webpack, интерфейс командной строки Webpack, сервер разработки, основные загрузчики (CSS, SCSS и Babel), плагины и необходимые фреймворки CSS — Bootstrap и Tailwind CSS, а также normalize.css.
Шаг 3: Создайте конфигурацию Webpack
Теперь давайте создадим файл конфигурации Webpack для управления процессом сборки нашего проекта. В корне вашего проекта создайте файл с именем webpack.config.js и добавьте следующую конфигурацию:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development", // Set the mode to "development" for faster builds and source maps. Change to "production" for optimized builds.
entry: {
bundle: path.resolve(__dirname, "src/index.js"), // The entry point for our application.
},
output: {
path: path.resolve(__dirname, "dist"), // Output directory for the bundled files.
filename: "js/[name][contenthash].js", // Name of the bundled JavaScript file.
clean: true, // Clean the "dist" directory before each build.
assetModuleFilename: "assets/[name][ext]", // Asset filenames for images and other files.
},
devtool: "source-map", // Generate source maps for easier debugging.
devServer: {
static: {
directory: path.join(__dirname, "dist"), // Serve static files from the "dist" directory.
},
compress: true, // Compress assets to speed up server responses.
port: 3000, // Port number for the development server.
},
module: {
rules: [
{
test: /\.scss$/, // Process .scss files with "sass-loader", "css-loader", "postcss-loader", and "MiniCssExtractPlugin".
use: [
MiniCssExtractPlugin.loader, // Extract CSS into separate files for production build.
"css-loader", // Translates CSS into CommonJS.
"postcss-loader", // PostCSS is used for autoprefixing CSS for better cross-browser support.
"sass-loader", // Compiles SCSS to CSS.
],
},
{
test: /\.js$/, // Process .js files with "babel-loader" excluding "node_modules".
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"], // Use @babel/preset-env to transpile modern JavaScript to older versions for wider browser compatibility.
},
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i, // Process image files with "asset/resource" type.
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack Starter Template", // The title of the generated HTML file.
filename: "index.html", // The name of the generated HTML file.
template: "src/template.html", // Use the "template.html" file as the base for the generated HTML.
}),
new MiniCssExtractPlugin({
filename: "css/[name][contenthash].css", // CSS files will be saved in the "css" folder with hashed filenames for better caching.
}),
new CleanWebpackPlugin(), // Clean the "dist" directory before each build to remove old files.
],
};
Эта конфигурация настраивает Webpack для связывания JavaScript и обработки файлов SCSS, создания папки dist для вывода и использования HtmlWebpackPlugin для создания HTML-файла для нашего проекта. Он также включает MiniCssExtractPlugin для извлечения SCSS в отдельный файл CSS и CleanWebpackPlugin для очистки папки dist перед каждой сборкой.
Шаг 4: Создайте HTML-файл шаблона
Далее давайте создадим HTML-файл шаблона, который послужит основой для нашего сгенерированного index.html. В корне вашего проекта создайте файл с именем template.html и добавьте следующее содержимое:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webpack Starter Template</title> </head> <body> <div id="app"></div> </body> </html>
Этот файл HTML обеспечивает базовую структуру для нашего проекта с элементом div, имеющим идентификатор app, куда можно внедрить наш код JavaScript.
Шаг 5: Создайте входной файл JavaScript
Далее давайте создадим входной файл JavaScript, в котором будет запускаться код нашего приложения. В папке src создайте файл с именем index.js и добавьте следующее содержимое:
import 'bootstrap';
import 'normalize.css';
import './assets/scss/main.scss'
console.log('Webpack Starter Template');
Мы импортировали styles.scss, который будет нашим основным файлом SCSS, содержащим все глобальные стили для нашего проекта.
Шаг 6: Создайте стили SCSS и CSS
Теперь давайте создадим наши стили SCSS и CSS. В корне вашего проекта создайте папку с именем src и внутри нее создайте папку с именем assets/scss. В папке scss создайте файл с именем main.scss и добавьте следующее содержимое:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* Add your styles here */
body {
@apply bg-gradient-to-b from-blue-400 to-indigo-600 min-h-screen flex items-center justify-center;
}
h1 {
@apply text-3xl font-semibold mb-6;
}
p {
@apply text-gray-600 mb-6;
}
a {
@apply bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full;
}
Шаг 7: Добавьте скрипты npm
Чтобы упростить рабочий процесс разработки, давайте добавим несколько сценариев npm для запуска нашего проекта. Откройте файл package.json и добавьте следующие скрипты:
"scripts": {
"dev": "webpack serve --open --hot --mode development",
"build": "webpack --mode production"
}
Мы добавили два скрипта: dev и build. Скрипт dev запустит сервер разработки с горячей заменой модулей для более быстрой разработки. Скрипт build создаст производственную сборку нашего проекта.
Шаг 8. Проверьте установку
Все готово! Давайте протестируем наш стартовый шаблон Webpack. В терминале выполните следующую команду, чтобы запустить сервер разработки:
npm run dev
Это запустит сервер разработки. Откройте браузер и перейдите на http://localhost:3000/.
Полный проект вы можете найти на github.
Удачного кодирования! 🎉
