Install

yarn add -D svelte svelte-loader css-loader mini-css-extract-plugin webpack webpack-cli webpack-dev-server

svelte

svelte-loader

svelte 구성 요소 용 로더

css-loader

css 로더

mini-css-extract-plugin

css를 추출 할 수있는 플러그인

Hello World!

webpack.config.js 는 이쪽을 참고로 했습니다

htps : // 기주 b. 이 m / s ょぇ l js / mp

htps : // 기주 b. 이 m / s ゔぇ l js / s ょぇ l ぉ 아데 r

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: process.env.NODE_ENV || "development",
    module: {
        rules: [
            {
                test: /\.svelte$/,
                use: {
                    loader: "svelte-loader",
                    options: {
                        // tureにすることで、
                        // svelteファイルの<style>タグをのcssを
                        // 「test: /\.css$/」のフローでコンパイルできる
                        emitCss: true,
                    }
                },
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                ],
            },
        ]
    },
    resolve: {
        extensions: [".mjs", ".js", ".svelte"],
    },
    plugins: [
        // 出力する際のファイル名を指定する
        new MiniCssExtractPlugin({ filename: "[name].css" }),
    ],
    devServer: {
        port: 9000,
        contentBase: "./",
        publicPath: "/dist/",
        open: true
    }
};

src/index.js

import App from "./App";

const app = new App({
    target: document.body,
});

export default app;

src/App.svelte

<script>
  let value = "world";
</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>Hello {value} !</h1>

index.html

<!DOCTYPE html>
<meta charset=UTF-8>
<title>Document</title>
<link rel=stylesheet href=dist/main.css>
<script src=dist/main.js defer></script>

yarn webpack-dev-server #http://localhost:9000/で確認できる

TODO 목록 작성

src/App.svelte

<script>
  import { afterUpdate } from "svelte";
  afterUpdate(() => {
    document.querySelector(".js-todo-input").focus();
  });

  let todoItems = [];
  let newTodo = "";

  function addTodo() {
    newTodo = newTodo.trim();
    if (!newTodo) return;

    todoItems = [...todoItems, { text: newTodo, complete: false }];
    newTodo = "";
  }

  function toggleDone(index) {
    todoItems[index].complete = !todoItems[index].complete;
  }

  function removeTodo(index) {
    todoItems = todoItems.filter((_, i) => i !== index);
  }

  let value = "world";
</script>

<style>
  h1 {
    color: purple;
  }

  .done {
    text-decoration: line-through;
  }

  .delete {
    color: #777;
    text-decoration: none;
  }
</style>

<h1>Hello {value} !</h1>
<form on:submit|preventDefault={addTodo}>
  <input type="text" class="js-todo-input" bind:value={newTodo} />
  <button type="submit">Add Todo</button>
</form>
<ul>
  {#each todoItems as todo, index}
    <li>
      <input
        id={index}
        type="checkbox"
        bind:checked={todo.complete}
        on:click={() => toggleDone(index)} />
      <span class={todo.complete ? 'done' : ''}>{todo.text}</span>
      <a
        href="#hoge"
        class="delete"
        on:click|preventDefault={() => removeTodo(index)}>
        [x]
      </a>
    </li>
  {/each}
</ul>

TODO 목록을 만들 수 있습니다. 끝까지 읽어 주셔서 감사합니다. m(_ _)m

Reference

이 문제에 관하여(Svelte를 webpack으로 이동하여 TODO 목록을 작성해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/okumurakengo/items/9240e65d83ce496383e7

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다