Vytvoření webového balíčku potřebného pro three.js

Krok 1 – Základní nastavení:

Přejděte do adresáře
npm init → Inicializovat npm
vytvořit src složku a vložte script.js , index.html a style.css v něm.

v index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Name</title>
</head>
<body>

</body>
</html>

v script.js přidat:

import ./style.css

v style.css přidat:

* {
    margin: 0;
    padding: 0;

PS:Přidáváme pouze základní desku kotle.

Krok 2 – Nastavení webového balíčku

yarn add webpack webpack-cli v CLI pro přidání závislostí webpacku:webpack a webpack-cli
Vytvořte bundler složku na stejné úrovni jako src
Vytvořte webpack.common.js v něm.
Odstraňte „main“ z package.json → odstranění vstupního bodu z package.json, abyste předešli kolizím.

Krok 3 – Konfigurace webového balíčku:

Vytvoření vstupu a výstupu -> v souboru webpack.common.js

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, '../src/script.js'),
    output:
    {
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, '../dist')
    },
        devtool: 'source-map',
}

Pro testování v package.json přidejte následující skripty:

"scripts": {
    "test": "webpack --config ./bundler/webpack.common.js",
},

zde upřesňujeme, že namísto toho, abychom měli soubor webpack.config.js v naší kořenové složce, jsme jej oddělili do složky bundler.

Můžete spustit npm run test kdykoli mezi tím uvidíte výstup v dist složku

Krok 4 – Instalace zavaděčů, pluginů a napsání příslušných pravidel pro konfiguraci webpacku:

Jak psát pravidla?

module.exports = {
    entry: path.resolve(__dirname, '../src/script.js'),
    output:
    {
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, '../dist')
    },
        devtool: 'source-map',
    module: {
        rules: [
            …
        ]
    }
};

Přidávání pluginů:

Vyžadovat je v horní části souboru javascript:
Deklarování pluginu:Přidejte klíč pluginu jako vlastnost objektu modules.export a jeho hodnota je pole, kde deklarujeme pluginy spolu s konfiguracemi (pokud existují)

module.exports = {
    entry: path.resolve(__dirname, '../src/script.js'),
    output:
    {
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, '../dist')
    },
        devtool: 'source-map',
        plugins:[
        ...
    ],
    module: {
        rules: [
            …
        ]
    }
};

Podpora HTML ve webovém balíčku: yarn add html-webpack-plugin :Jedná se o zásuvný modul pro webový balíček, který zjednodušuje vytváření souborů HTML pro poskytování vašich balíčků webových balíčků. To je zvláště užitečné pro balíčky webpacků, které obsahují hash v názvu souboru, který mění každou kompilaci.

Vyžadovat plugin:

const HtmlWebpackPlugin = require('html-webpack-plugin')

Přidat plugin:

plugins:[
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../src/index.html'),
        minify: true
    }),
],

yarn add html-loader
Připojte toto pravidlo do pole pravidel

//HTMl:
{
    test: /\.(html)$/,
    use: ['html-loader']
},

Tím se nyní vytiskne html soubor také ve složce dist.

Podpora JS ve webovém balíčku:

yarn add @babel/core
yarn add @babel/preset-env
yarn add babel-loader

(V současné době je přidáváme jako uživatelské závislosti, ale můžeme to změnit na závislosti pro vývojáře)

//JS
{
    test: /\.js$/,
    exclude: /node_modules/,
    use:[
        'babel-loader'
    ]
},

Podpora CSS ve webovém balíčku:

yarn add mini-css-extract-plugin

yarn add css-loader

Vyžadovat závislost v horní části stránky.

const MiniCSSExtractPlugin = require('mini-css-extract-plugin')

Prohlášení pluginu

plugins:
[
    new MiniCSSExtractPlugin()
],

Přidejte následující pravidlo:

// CSS
{
    test: /\.css$/,
    use:
    [
        MiniCSSExtractPlugin.loader,
        'css-loader'
    ]
},

Další informace:Learn Webpack Pt. 8:Html-loader, File-loader a Clean-webpack

Krok 5 – Přidání `file-loader` další zavaděče pro práci s písmy a obrázky

yarn add file-loader
Přidejte následující pravidla pro práci s obrázky a písmy používanými v aplikaci.

// Images
{
    test: /\.(jpg|png|gif|svg)$/,
    use:
    [
        {
            loader: 'file-loader',
            options: {
                outputPath: 'assets/images/'
            }
        }
    ]
},

// Fonts
{
    test: /\.(ttf|eot|woff|woff2)$/,
    use:
    [
        {
            loader: 'file-loader',
            options: {
                outputPath: 'assets/fonts/'
            }
        }
    ]
},

V možnostech určujeme, že po sestavení aplikace vložte obrázky a písma do složky aktiv.

Když spustíme npm run build pro vytvoření distribuční složky připravené k produkci, webpack projde váš kód a jakmile najde něco jako obrázek nebo písma, automaticky vytvoří složku aktiv, ve které bude složka s obrázky pro uložení importovaného obrázku a bude tam složku písem v aktivech vytvořenou pro uložení odpovídajícího písma.

Krok 6 – Přidání `copy-webpack-plugin` :**

Myšlenka je taková, že v dev budete mít statickou složku, kam budete ukládat všechna svá písma, obrázky atd., a v sestavení prod chcete, aby to bylo vše zkopírováno do složky sestavení.

Bez tohoto pluginu budou ve výsledné produkční složce, která se vytvoří, pouze ty obrázky, které budou svazky, které jsou importovány do javascriptu.

Od této chvíle se také ujistěte, že máte ve statické složce alespoň jeden obrázek, jinak dojde k chybě.

Struktura uvnitř statické složky bude replikována ve složce dist (produkční sestavení).

Nejprve se ujistěte, že jste vytvořili statickou složku.

yarn add copy-webpack-plugin
Vyžadovat/importovat:

const CopyWebpackPlugin = require('copy-webpack-plugin')

Deklarujte to:

plugins:[
    new CopyWebpackPlugin({
        patterns: [
            { from: path.resolve(__dirname, '../static') }
        ]
    }),
    ....
],

Zde se od této chvíle ujistěte, že je ve vaší statické složce testovací obrázek, jinak jeho vytvoření (npm run test) povede k chybě.

Krok 7 – Vytvoření konfigurace vývojáře:ke spuštění živého serveru.

Použijeme webpack.common.js commn konfiguraci, kterou bude používat pro konfigurace pro vývojáře a prod:

Na serveru Dev se soubory sestaví v paměti a jsou zničeny, jakmile je zničeno ID serveru.

Vytvořte webpack.dev.js soubor ve složce bundler
Import commonConfiguration z webpack.common.jsK importu budeme potřebovat webpack-merge modul
yarn add webpack-merge
Přidání základních věcí do webpack.dev.js

const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
module.exports = merge(
    commonConfiguration,
    {
        mode: 'development'
    }
)

Přidání dev skriptu do package.json

"scripts": {
  "test": "webpack --config ./bundler/webpack.common.js",
  "dev": "webpack serve --config ./bundler/webpack.dev.js",
},

zde příznak poskytování způsobí, že se bude znovu načítat, ale před spuštěním je ještě potřeba přidat několik věcí, abychom mohli tuto aplikaci poskytovat.

Přidání závislostí serveru.
yarn add portfinder-sync> Synchronně vyhledejte otevřený port.
yarn add D webpack-dev-server
Aktualizace wepack dev:
Import požadovaných modulů:

const ip = require('internal-ip')
const portFinderSync = require('portfinder-sync')

Funkce, která tiskne názvy lokální domény (kde běží server):

const infoColor = (_message) => {
    return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`
}

Přidání klíče devServer do exportů modulu:

devServer: {
  host: '0.0.0.0',
  port: portFinderSync.getPort(8080),
  contentBase: './dist',
  watchContentBase: true,
  open: true,
  https: false,
  useLocalIp: true,
  disableHostCheck: true,
  overlay: true,
  noInfo: true,
  after: function(app, server, compiler)
  {
      const port = server.options.port
      const https = server.options.https ? 's' : ''
      const localIp = ip.v4.sync()
      const domain1 = `http${https}://${localIp}:${port}`
      const domain2 = `http${https}://localhost:${port}`

      console.log(`Project running at:\n  - ${infoColor(domain1)}\n  - ${infoColor(domain2)}`)
  }
}

Zkuste spustit npm run dev a měli byste vidět, jak se spouští živý server! a toto je nyní živá aktualizace se všemi změnami, které provedete!

Krok 8 – Vytvoření konfigurace sestavení:pro vytvoření dist složky připravené k produkci.

Vytvoření produkčního konfiguračního souboru ve složce bundlers:bundlers → webpack.prod.js
Přidání základních konfigurací do webpack.prod.js:

const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')

module.exports = merge(
    commonConfiguration,
    {
        mode: 'production',
    }
)

Použije stejné sloučení a commonConfiguration jako dev konfigurace. Jen změníme režim.

Přidání pluginu:
yarn add clean-webpack-plugin> Zásuvný modul webpack pro odstranění/vyčištění vašich složek sestavení. Zajišťuje, že neexistuje žádná složka dist.

Import a deklarace pluginu v konfiguraci produkce webového balíčku:

const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = merge(
    commonConfiguration,
    {
        mode: 'production',
        plugins:
        [
            new CleanWebpackPlugin()
        ]
    }
)

Přidejte skripty do package.json pro příkaz sestavení.

"scripts": {
  "test": "webpack --config ./bundler/webpack.common.js",
  "dev": "webpack serve --config ./bundler/webpack.dev.js",
  "build": "webpack --config ./bundler/webpack.prod.js"
},

A to by mělo být vše, zkuste spustit npm run build a zkontrolujte složku dist, která by byla vytvořena.

Krok 9 – Přidání raw-loaderu pro načítání shaderů:

yarn add raw-loader
Pravidla Webapack:

// Shaders
{
    test: /\.(glsl|vs|fs|vert|frag)$/,
    exclude: /node_modules/,
    use: [
        'raw-loader'
    ]
}

Zdroje:
Webpack – podrobný úvod – Smashing Magazine
Noční verze tohoto blogpostu
Mnoho konfigurací webpacku bylo inspirováno šablonou Bruna Simonse, kterou používá pro svůj báječný kurz - Three.js Journey

Vytvoření webového balíčku potřebného pro three.js

Krok 1 – Základní nastavení:

Krok 2 – Nastavení webového balíčku

Krok 3 – Konfigurace webového balíčku:

Krok 4 – Instalace zavaděčů, pluginů a napsání příslušných pravidel pro konfiguraci webpacku:

Krok 5 – Přidání `file-loader` další zavaděče pro práci s písmy a obrázky

Krok 6 – Přidání `copy-webpack-plugin` :**

Krok 7 – Vytvoření konfigurace vývojáře:ke spuštění živého serveru.

Krok 8 – Vytvoření konfigurace sestavení:pro vytvoření dist složky připravené k produkci.

Krok 9 – Přidání raw-loaderu pro načítání shaderů:

Výukový program Three.js – Jak vykreslit 3D objekty v prohlížeči

Jak škálovat sprite three.js?

Vytvoření vlastního shaderu v Three.js

Javascript / Three.js nefunguje v https

Three.js – Otáčení koule kolem určité osy

Texturování válce v Three.js

Vytvoření webového balíčku potřebného pro three.js

Krok 1 – Základní nastavení:

Krok 2 – Nastavení webového balíčku

Krok 3 – Konfigurace webového balíčku:

Krok 4 – Instalace zavaděčů, pluginů a napsání příslušných pravidel pro konfiguraci webpacku:

Krok 5 – Přidání file-loader další zavaděče pro práci s písmy a obrázky

Krok 6 – Přidání copy-webpack-plugin :**

Krok 7 – Vytvoření konfigurace vývojáře:ke spuštění živého serveru.

Krok 8 – Vytvoření konfigurace sestavení:pro vytvoření dist složky připravené k produkci.

Krok 9 – Přidání raw-loaderu pro načítání shaderů:

Výukový program Three.js – Jak vykreslit 3D objekty v prohlížeči

Jak škálovat sprite three.js?

Vytvoření vlastního shaderu v Three.js

Javascript / Three.js nefunguje v https

Three.js – Otáčení koule kolem určité osy

Texturování válce v Three.js

Krok 5 – Přidání `file-loader` další zavaděče pro práci s písmy a obrázky

Krok 6 – Přidání `copy-webpack-plugin` :**