Создаем репозиторий на GitHub с двумя файлами .gitignore MIT License Клонируем репозиторий проекта на локальный компьютер, командой: git clone url_repo в консоли Git Bash, открытой в отведенной папке или диске на вашем компьютере Заходим внутрь клонированного репозитория, командой: cd repo_name в консоли Git Bash Открываем папку проекта в редакторе кода VSCode, командой: code . Открываем TERMINAL в редакторе кода VSCode (внизу окна редактора) Инициализируем (создаем) файл package.json в нашем проекте, командой: npm init -y в TERMINAL - слева в структуре проекта должен появится файл package.json Устанавливаем пакеты Webpack через TERMINAL, командой: npm install --save-dev webpack webpack-cli
должна произойти загрузка пакетов webpack в появившуюся в структуре проекта папку node_modules и создается запись о подключении пакетов в файле package.json раздел "devDependencies"
npm install --save-dev webpack-dev-server npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties npm install --save-dev html-loader npm install --save-dev style-loader css-loader postcss-loader postcss autoprefixer npm install -D file-loader url-loader npm install --save-dev html-webpack-plugin npm install --save-dev mini-css-extract-plugin npm install --save-dev clean-webpack-plugin npm install --save-dev webpack-merge npm install --save-dev friendly-errors-webpack-plugin npm install -D webpackbar npm install -D optimize-css-assets-webpack-plugin npm install -D handlebars handlebars-loader npm install --save-dev gh-pages Указываем скрипты в файле package.json раздел "scripts": "scripts": { "start": "webpack-dev-server --env.mode development", "build": "webpack --env.mode production", "predeploy": "npm run build", "deploy": "gh-pages -d dist" } Создаем структуру проекта папка src внутри папки src файл index.js Создаем файл конфигураций Webpack в корне проекта webpack.config.js Устанавливаем Файлы настроек .babelrc https://babeljs.io/docs/en/configuration { "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-proposal-class-properties"] }
postcss.config.js https://github.com/postcss/postcss-loader module.exports = { plugins: [require("autoprefixer")], };
.prettierrc https://prettier.io/docs/en/options.html { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "stringleQuote": true, "trailingComma": "all", "bracketSpacing": true, "jsxBracketSameLine": false, "proseWrap": "always" }
webpack.config.js (в корне проекта) const path = require("path"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const { merge } = require("webpack-merge"); const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin"); const WebpackBar = require("webpackbar");
// console.log("DIRNAME", **dirname); // глобальная переменная, содержащая абсолютный путь к файлу
const loadModeConfig = (env) =>
require(./build-utils/${env.mode}.config
)(env);
// экспорт объекта настроек
module.exports = (env) =>
merge(
{
mode: env.mode,
context: path.resolve(**dirname, "src"),
// 1. точка входа - откуда строить дерево зависимостей
entry: "./index.js",
// 2. куда положить результирующий бандл
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
},
// 3. загрузчики (loaders)
module: {
rules: [
{
test: /.js$/, // регулярное выражение
exclude: /node_modules/, // через указ папку свойства не прогонять
use: ["babel-loader"],
},
{
test: /.(gif|png|jpe?g|svg)$/,
use: [
{
loader: "url-loader",
options: {
name: "[path]/[name].[ext]",
limit: 5000,
},
},
],
},
{
test: /.html$/,
use: ["html-loader"],
},
{
test: /.hbs$/,
use: ["handlebars-loader"],
},
],
// плагины применяются к результирующему бандлу
},
plugins: [
new CleanWebpackPlugin(),
new FriendlyErrorsWebpackPlugin(),
new WebpackBar(),
],
},
loadModeConfig(env)
);
development.config.js (в папке build-utils) const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = (env) => ({ devtool: "cheap-eval-source-map", module: { rules: [ { test: /.css$/, use: ["style-loader", "css-loader", "postcss-loader"], }, ], }, plugins: [new HtmlWebpackPlugin({ template: "./index.html" })], devServer: { contentBase: path.join(__dirname, "dist"), historyApiFallback: true, compress: true, port: 4141, noInfo: true, quiet: true, clientLogLevel: "warning", stats: "errors-only", open: true, }, });
production.config.js (в папке build-utils) const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); module.exports = (env) => ({ devtool: "source-map", module: { rules: [ { test: /.css$/, use: [ MiniCssExtractPlugin.loader, // вытянет из js "css-loader", // добавит все в js "postcss-loader", // добавляет автопрефиксы ], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: "./index.html", minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true, }, }), new MiniCssExtractPlugin({filename: "styles.css"}), new OptimizeCssAssetsPlugin(), ], });