Вот как настроить приложение "Hello world" с нуля:
Установка пакетов
- Создание новой папки
- Запуск
npm init -y - Установите модули, связанные с веб-пакетом:
npm install --save-dev webpack webpack-cli html-loader
- Для определения смысла в вашем редакторе установите knockout
npm install --save-dev knockout
- Создайте команду npm в разделе скриптов:
"scripts": { "build": "webpack" }
Настройка веб-пакета
- Создание
webpack.config.js файла:
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "index.js"),
module: {
rules: [
// This tells webpack to import required html files
// as a string, through the html-loader
{ test: /\.html$/, use: [ "html-loader" ] }
],
},
// You *could* include knockout in your bundle,
// but I usually get it from a CDN
externals: {
knockout: "ko"
}
}
Создание нашей модели viewmodel & view
- Создание папки с именем
Components - Создать
Greeter.html
<h1 data-bind="text: message">...</h1>
const greeterTemplate = require("./Greeter.html");
module.exports = {
viewModel: function(params) {
this.message = params.message;
},
template: greeterTemplate
};
Создание наших точек входа
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<greeter params="message: 'Hello world!'"></greeter>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="dist/main.js"></script>
</body>
</html>
const ko = require("knockout");
const greeter = require("./Components/Greeter");
ko.components.register("greeter", greeter);
ko.applyBindings({});
Сборка и браузер
- run
npm run build, веб-пакет создаст файл в папке dist - Откройте
index.html в вашем браузере.Он должен приветствовать вас "Hello world"!