Тестирование и сбрка проекта. Webpack

Lesson 8, Advanced JS, Bondarchuk

by shurikation

JavaScript

//Роутинг - маршрутизация - когда поступает запрос на сайт, наш сайт должен показать то, что осоотвествует запросы клиента. Сопоставление между тем что находится в адресной строке и компонентом, который показывается пользователю. В итоге с помощью ройтинга мы можем сделать страницу в виду отдельного Vue компонента

//npm init -y  (-y это настройки по дефолтуб чтобы не отвечать на дурацие вопросы)

//Устанавливаем дополнительные

// npm i -D webpack webpack-cli  (webpack-cli это дополнительное расширение)

//Вебпак объединяет наш код на html, css, js - в однин модуль. Т.е. можем писать более модульно теперь. Делим приложение на более мелкие файлы.

//Ставим дополнительные утилиты:
//Babel - чтобы использовать новые фишки языка. Ставим Babel и плагины к нему чтоы он больше распознавала. :
//npm i -D @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env babel-loader css-loader html-webpack-plugin node-sass sass-loader vue-loader

//Чтобы Бабель знал о том, какие мы плагины для него установили нужно создать конфигурационный файл для этого

//.babelrc
//Файл json-формата

//Создаем и пишем в файл webpack.config.js:
//Конфиг для Вебпака
//Пишется на чистом JS

const path = require('path'); //Помогает строить пути к файлам
//Т.к. разные разрабы сидят под разными ОС, чтобын е было путаницы у пути

module.exports = {
    entry: path.resolve(__dirname, 'src', 'index.js') //Точка входа
    //Указываем папку src в которой лежит index.js
    //С этого файла все и будет начинаться

    output: { //Куда все будет собираться в какую папку
        filename: "bundle.js",
    }
};
//Этой конфиги уже достаточно для сборки

//В файл .babelrc:
//Подключаем пресеты
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false //Чтобы вебпак сам занимался модулями.Бабель умеет создавать модульную систему, и чтобы модулями занимался не Бабель, а Вэпак - ставим фолс
      }
    ]
  ],
  "plugins": [
        "@babel/plugin-syntax-dynamic-import"
  ]
}
//На...