Webpack > Hello world

WTF

Webpack это хреновина для автоматической сборки проектов, подтягивание необходимых библиотек, подключение файлов, удаление лишнего из кода итд.

Hello world ниже позволяет запустить серв, который будет при изменении в проекте налету его пересобирать, компилить sass, подтягивать js, и собирать из неотёсанных dev файлов полноценный dist в продакшн

Файловая структура

• /site/app/index.html
• /site/app/js/app.js
• /site/app/sass/app.sass
• /site/webpack.config.js
• /site/config.json

Установка

    npm init
    npm i webpack webpack-cli
    npm i style-loader less-loader css-loader file-loader -D
    npm i sass-loader sass webpack --save-dev
    npm i html-webpack-plugin clean-webpack-plugin -D
    npm i webpack-dev-server -D
    npm i svg-inline-loader -D
    npm install --save-dev mini-css-extract-plugin
  

Настройка

• webpack.config.js

  Основные конфиги

  
          const path = require('path')
          const {CleanWebpackPlugin} = require('clean-webpack-plugin')
          const HtmlWebpackPlugin = require('html-webpack-plugin')
          
          module.exports = {
            entry: './app/js/app.js',
            module: {
              rules: [
                { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
                {
                  test: /\.s[ac]ss$/i,
                  use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                  ],
                },
                { test: /\.svg$/, use: 'svg-inline-loader' },
                { test: /\.(jpg|jpeg|png)$/, use: 'file-loader' },
              ]
            },
            output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'app.js'
            },
            plugins: [
              new HtmlWebpackPlugin({'template': './app/app.html'}),
              new CleanWebpackPlugin()
            ],
            devServer: {
              port: 666
            },
            performance: {
             hints: false,
             maxEntrypointSize: 5120000,
             maxAssetSize: 5120000
            },
            devtool: false,
            mode: 'production'
          }
  
        

• config.json

  Для запуска сервера

  
          {
            "name": "fleurrell",
            "version": "1.0.0",
            "description": "",
            "main": "index.js",
            "scripts": {
              "test": "echo \"Error: no test specified\" && exit 1",
              "start": "webpack-dev-server --open",
              "build": "webpack"
            },
            "repository": {
              "type": "git",
              "url": "git+https://github.com/trywar/fleurrell.git"
            },
            "author": "TrywaR",
            "license": "ISC",
            "bugs": {
              "url": "https://github.com/trywar/fleurrell/issues"
            },
            "homepage": "https://github.com/trywar/fleurrell#readme",
            "dependencies": {
              "webpack-cli": "^4.9.1"
            },
            "devDependencies": {
              "clean-webpack-plugin": "^4.0.0",
              "css-loader": "^6.5.1",
              "file-loader": "^6.2.0",
              "html-webpack-plugin": "^5.5.0",
              "less-loader": "^10.2.0",
              "sass": "^1.43.4",
              "sass-loader": "^12.3.0",
              "style-loader": "^3.3.1",
              "svg-inline-loader": "^0.8.2",
              "webpack": "^5.64.1",
              "webpack-dev-server": "^4.5.0"
            }
          }
  
        

  Где акцент на строчку

  
          "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "start": "webpack-dev-server --open",
            "build": "webpack"
          },
        

  Тут у нас инструкции что делать, например start запустит серв, build соберёт проект

• app.js

  Собстна js код, с подлючением стилей

  
          import "../sass/app.sass";
        

Запуск

Собрать проект

    npm run build
  

Запустить серв, подхватывать изменения на лету

    npm run start
  

Печенеги

    npm install --save @fortawesome/fontawesome-free
    npm install reset-css