Как настроить WebPack 4 с угловым 7: полное руководство

Автор оригинала: FreeCodeCamp Community Member.

Самуэль Тебул

Угловая CLI позволяет легко создать приложение, которое уже работает, прямо из коробки. Это отличный инструмент, но вы никогда не думали: “Как это работает? Как я могу построить приложение без CLI? »

Эти вопросы пришли к моему мнению, когда было выпущено угловые 7. Я начал искать ответы в Интернете и то, что я нашел, не был в курсе моей цели. Действительно, как угловой и веб-папак всегда развиваются, такие зависимости и конфигурации.

В этой статье вы собираетесь учиться:

Как настроить угловую 7 основных приложений, с нуля
Как настроить WebPack для режима разработки (счетный компиляция)
Как настроить WebPack для производства режима (опереди от компиляции)

Angular 7: Настройка базового приложения

Создать новый Package.json Файл и добавьте следующие строки для установки угловых и его зависимостей.

"dependencies": 
  "@angular/animations": "~7.0",
  "@angular/common": "~7.0",
  "@angular/compiler": "~7.0",
  "@angular/compiler-cli": "~7.0",
  "@angular/core": "~7.0",
  "@angular/forms": "~7.0",
  "@angular/http": "~7.0",
  "@angular/platform-browser": "~7.0",
  "@angular/platform-browser-dynamic": "~7.0",
  "@angular/platform-server": "~7.0",
  "@angular/router": "~7.0",
  "@angular/upgrade": "~7.0",
  "core-js": "~2.5",
  "rxjs": "~6.3",
  "zone.js": "~0.8"
}

Я долго боролся, чтобы найти лучшую структуру папки, которая соответствует каждому угловому проекту, особенно когда приложение растет в размере. Это Статья научил меня много на эту тему.

Создать новый SRC Папка и следующие папки/файлы внутри нее. Все наши угловые бизнес-логики приложения будут в этой папке.

src
|__ app
    |__ modules
        |__ menu
            |__ components
                |__ menu
                    |__ menu.component.html
                    |__ menu.component.scss
                    |__ menu.component.ts
            |__ menu.module.ts
            |__ menu-routing.module.ts
|__ shared
         |__ components
             |__ home
                 |__ home.component.html
                 |__ home.component.scss
                 |__ home.component.ts
|__ app.component.html
        |__ app.component.scss        
        |__ app.component.ts
        |__ app.module.ts
        |__ app-routing.module.ts
|__ index.html
|__ main.ts

Каждое приложение имеет хотя бы один угловой модуль, корень Модуль, который вы загрузите, чтобы запустить приложение. По соглашению, это обычно называют AppModule Отказ Я создаю другой модуль, Менумодуль Чтобы показать вам, как вы можете использовать ленивую загрузку в вашем проекте, особенно для производства.

Некоторые важные моменты:

index.html.

Добавить <База href = "/"> Сообщает нашему углому роутеру, как составить URL навигации. Эта строка означает, что ваше приложение начнется с корневой папки I.E Локально, это будет рассмотреть localhost: 3000/ А на сервере это рассмотрело бы корневую папку.

приложение. Module.ts.

Существует три основных шага для настройки ленивого загруженного функционального модуля:

Создайте модуль функций
Создайте модуль маршрутизации функций модуля
Настройте маршруты

{Путь: «Меню», Loadchildren: './Модули/Меню/Меню.Модуль # Менумодуль'} Рассказывает угловой в ленивую загрузку нашего модуля функций Меню К тому времени, когда пользователь посещает /Меню маршрут.

Настройка Teamscript

Добавьте следующие строки к вашему Package.json файл:

"devDependencies": {
  "@types/core-js": "~2.5",
  "@types/node": "~10.12",
  "typescript": "~3.1"
}

Создайте в вашем корневой папке проекта A tsconfig.json файл:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "lib": ["es6", "dom"],
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"]
}

Это базовый файл конфигурации. Важно установить узел и Core-JS Типы определения. Без этого TypeScript не сможет компилировать наше угловое приложение к JavaScript.

Конфигурация WebPack для режима разработки (счетано-временная компиляция)

Прежде всего, что делает Компиляция средства ? Он не означает компиляцию файлов Teamscript для JavaScript, это не связано с угловой. Сама угловая должна компилировать свои HTML-шаблоны в JavaScript, и это может произойти в 2 разных точках времени:

После того, как ваше приложение загружено в браузере (JIT)

Сразу после разработки, в состав времени, прежде чем ваше приложение загружено в браузере (AOT)

Что такое WebPack?

По словам Википедии:

Чтобы сообщить WebPack, как подключить наше приложение, мы должны настроить то, что мы называем Основные понятия :

Вход – Точка входа указывает, какой модуль WebPack должен использовать, чтобы начать строить его внутренний График зависимости Отказ WebPack выясняется, какие другие модули и библиотеки точка входа зависят от (напрямую и косвенно).

Выход – Выходное свойство сообщает WebPack, где выделять пакеты, которые оно создает, и как назвать эти файлы. По умолчанию для ./dist/main.js Для основного выходного файла и к ./dist папка для любого другого сгенерированного файла.

Погрузчики – На высоком уровне погрузчики имеют два свойства в вашей конфигурации WebPack:

Свойство теста идентифицирует, какой файл или файлы должны быть преобразованы.
Свойство использования указывает, какой загрузчик должен использоваться для выполнения преобразования.

Плагины – В то время как погрузчики используются для преобразования определенных типов модулей, плагины могут быть использованы для выполнения более широкого диапазона задач, таких как оптимизация пучка, управление активами и инъекция переменных среды.

Все это должно быть настроено в файле конфигурации WebPack webpack.config.js.

Настройка WebPack

В SRC Папка нам нужно создать еще 2 файлов:

Vendor.ts Это только импортирует сторонние модули приложения.
Polyfills.ts Нам нужны полифимки для запуска углового приложения в большинстве браузеров, как объяснено в Поддержка браузера руководство. Этот файл Bundle загрузит сначала, так что это хорошее место для настройки среды браузера для производства или развития.

Создать новый config . Папка и следующие файлы внутри:

webpack.config.common.js : Конфигурация, которую мы будем использовать для разработки и производства.

Вход – Для этого приложения (и для большинства из них на самом деле) у нас есть 3 разных точка входа: Vendor.ts Polyfills.ts и магистраль

entry: {
    vendor: './src/vendor.ts',
    polyfills: './src/polyfills.ts',
    main: './src/main.ts'
}

Погрузчики – Мы загружаем .html файлы с HTML-погрузчик который довольно стандартный. Загрузка .scss Файлы немного хитрым для углового приложения, и я изо всех сил боролся на много часов, чтобы выяснить, как это сделать.

Прежде всего, мы должны загружать файлы SASS с помощью двух погрузчиков Sass-Loader и CSS-погрузчик. Если вы хотите сделать отладку легко, особенно в режиме разработки, это действительно важно добавить SourceMap: правда как варианты. В угловом приложении мы добавляем стили к компоненту, передавая путь к файлу к Стилерлс Массив как следовать СИЛЬЮРЛС: ["./PATHE/Styles.scssssss"] Но нам нужно иметь стиль как строку и Струнный погрузчик сделаю это для нас и отбросить вывод в строку.

{
    test: /\.html$/,
    loader: 'html-loader'
},
{
    test: /\.(scss|sass)$/,
    use: [
        'to-string-loader',
        { 
            loader: 'css-loader', 
            options: { 
                sourceMap: true 
            } 
        },
        { 
            loader: 'sass-loader', 
            options: { 
                sourceMap: true 
            } 
        }
    ],
    include: helpers.root('src', 'app')
}

Плагины – CleanWebpackplugin Удалю/очищает папку сборки (ы), прежде чем построить снова. Htmlwebpackplugin Плагин будет генерировать файл HTML5 для вас, который включает в себя все ваши пакеты WebPack в корпусе, используя теги скрипта. Требуется только путь к шаблону.

new CleanWebpackPlugin(
    helpers.root('dist'),
    {
        root: helpers.root(),
        verbose: true
    }
),
new HtmlWebpackPlugin({
    template: 'src/index.html'
})

webpack.config.dev.js Наш конфигурация WebPack мы будем использовать только для режима разработки.

mode: "development"

В WebPack 4 выбранный режим сообщает WebPack использовать его встроенные оптимизации соответственно.

devtool: 'cheap-module-eval-source-map'

Эта опция контролирует, если и как генерируются исходные карты. Используя Cheap-module-eval-source-map Исходные карты от погрузчиков обрабатываются для лучших результатов. Тем не менее, карты источников загрузчика упрощаются до одного сопоставления на линию.

output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].bundle.js',
    chunkFilename: '[id].chunk.js'
}

Выход Клавиша содержит набор вариантов, начисляющих WebPack на том, как и где он должен выводить свои пакеты, активы и все еще, что вы пушите или загружаете с помощью WebPack. Здесь мы говорим WebPack для вывода наших связке к Dist папка.

optimization: {
    noEmitOnErrors: true
}

Пропускает излучающую фазу всякий раз, когда есть ошибки во время компиляции. Это гарантирует, что никакие испускаемые активы не испускаются. Оптимизация Клавиша имеет много других вариантов, которые устанавливаются по умолчанию в зависимости от режима конфигурации WebPack (разработка/производство). Вы можете прочитать больше об этом здесь Отказ

{
    test: /\.ts$/,
    loaders: [
        'babel-loader',
        {
            loader: 'awesome-typescript-loader',
            options: {
                configFileName: helpers.root('tsconfig.json')
            }
        },
        'angular2-template-loader',
        'angular-router-loader'
    ],
    exclude: [/node_modules/]
}

Угловой маршрутизатор-погрузчик Это загрузчик WebPack, который включает в себя модуль на основе строковых модулей с угловым маршрутизатором.

Angular2-шаблон-погрузчик это цепочка для загрузчика, которая входит в все HTML и стили в угловых компонентах.

потрясающий-типографский загрузчик В настоящее время является более быстрым WebPack Tymdercript ChestScript. Он использует разрешение зависимостей для создания графика зависимости модулей. Это относительно ускоряет процесс сборки.

Babel-Loader позволяет транспортировать файлы JavaScript.

devServer: {
    historyApiFallback: true,
    stats: 'minimal'
}

При использовании HTML5 История API , index.html Страница, вероятно, должна быть подана на месте любого 404 Ответы. Для этого нам нужно включить история pififallback.

Статистика Опция позволяет точно контролировать, какую информацию раскладывается. Это может быть хорошая средняя земля, если вы хотите немного расслоения, но не все это.

Добавление скриптов

Добавьте следующие строки к вашему Package.json файл:

"scripts": {
  "build:dev": "webpack-dev-server --inline --hot --progress --port 8080"
}

--hot Включает WebPack Замена горячего модуля (HMR). Это обменяет, добавляет или удаляет модули Хотя приложение работает, без полной перезагрузки. Это может значительно ускорить развитие в несколько способов:

Сохранить состояние приложения, которое теряется во время полной перезагрузки.
Сохраните ценное время разработки, обновляя только то, что изменилось.
Модификации, сделанные CSS/JS в исходном коде, приводит к обновлению мгновенного обновления браузера, которое почти сопоставимо с изменяющимися стилями непосредственно в инструментах разработки браузера.

Теперь вы все настройки! Вы можете запустить NPM Run Build: Dev Откройте свой браузер и перейдите к localhost: 8080.

Конфигурация WebPack для производства режима (опередив компиляции)

Преимущества компиляции AOT

С помощью AOT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, чтобы он мог немедленно сделать приложение, не дожидаясь, чтобы сначала скомпилировать приложение.
Компилятор включает в себя внешние HTML-шаблоны и листы стилей CSS в приложении JavaScript, устраняя отдельные запросы AJAX для этих исходных файлов.
Там нет необходимости загружать угловой компилятор, если приложение уже скомпилировано. Компилятор примерно половина самого угловых углов, поэтому их резко снижает полезную нагрузку приложения.
Компилятор AOT обнаруживает и сообщает об ошибках связывания шаблона во время шага сборки, прежде чем пользователи смогут их увидеть.
AOT компилирует HTML-шаблоны и компоненты в файлы JavaScript задолго до того, как они подаются клиенту. Без шаблонов для чтения и без рискованного клиентского HTML или JavaScript оценивается, существует меньше возможностей для приступов инъекций.

Настройка WebPack

В вашем config . Папка Создайте новый файл webpack.config.prod.js.

mode: 'production'

Мы обычно переходим к компиляции AOT в режиме производства, и, как я писал ранее, в WebPack 4 выбранный режим сообщает WebPack, чтобы соответственно использовал свои встроенные оптимизации.

output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
}

Мы также говорим WebPack выводить наши пакеты на Dist папка. Мы включаем хэш на имена файлов, чтобы эффективно эффективно использовать кэш уровня клиента. Таким образом, WebPack знает, изменился ли файл. WebPack предоставляет Защитники Для этого. Эти строки используются для приложения конкретной информации для выходов. Самые ценные:

[ID] Возвращает идентификатор куска.
[Путь] Возвращает путь к файлу.
[Имя] Возвращает имя файла.
[EXT] Возвращает расширение. [EXT] Работает для самых доступных полей.
[Хэш] Возвращает хэш сборки. Если какая-либо часть изменения сборки, это изменения также.
[Чуншаш] Возвращает входную кусочку хэш. Каждый Вход Определенные в конфигурации получает хеш собственного. Если какая-либо часть внесения изменений, хеш тоже изменится. [Чуншаш] больше гранулирования, чем [Хэш] по определению.
[ContentHash] Возвращает хеш, сгенерированный на основе содержания.

Предпочтительно использовать особо хэш и Chunkhash Только для производства, поскольку хеширование не имеет значения во время развития.

optimization: {
    noEmitOnErrors: true,
    splitChunks: {
        chunks: 'all'
    },
    runtimeChunk: 'single',
    minimizer: [
        new UglifyJsPlugin({
            cache: true,
            parallel: true
        }),
        
         new OptimizeCSSAssetsPlugin({
             cssProcessor: cssnano,
             cssProcessorOptions: {
                 discardComments: {
                     removeAll: true
                 }
             },
             canPrint: false
         })
    ]
}

Как и в режиме разработки, мы хотим пропустить фазу излучения, когда есть ошибки во время компиляции. Это гарантирует, что никакие испускаемые активы не испускаются.
Куски: «Все» Указывает, какие куски будут выбраны для оптимизации. Предоставление Все Может быть особенно мощным, потому что это означает, что куски могут быть разделены даже между асинхронными и несынковыми кусками.
Импортируемые модули инициализируются для каждой куски времени выполнения отдельно. Как WebPack предлагает, работая над проектом с Несколько точек входа Вы хотите иметь только один экземпляр выполнения. Для этого вам нужно установить его на «Один» Отказ
UGLifyjsplugin использует UGLIFY-JS Чтобы миниинзировать файлы JavaScript. Мы устанавливаем кэш и параллельно Свойства для правда Для того, чтобы включить кэширование файла и использовать многопроцесс, параллельный бегущий для улучшения скорости сборки. Есть больше вариантов, и я приглашаю вас узнать больше о Этот плагин Отказ
Optimizecssasssetsplugin Поиск активов CSS во время сборки WebPack и будет оптимизировать и минимизировать его. Процессор CSS, используемый для оптимизации, это CSSNANO. Все комментарии будут удалены из наших министерств CSS, и никакие сообщения не будут печатаны на консоли.

module: {
    rules: [
        {
            test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
            loader: '@ngtools/webpack'
        }
    ]
}

plugins: [
    new ngw.AngularCompilerPlugin({
        tsConfigPath: helpers.root('tsconfig.aot.json'),
        entryModule: helpers.root('src', 'app', 'modules', 'app', 'app.module#AppModule')
    })
]

@ ngtools/webpack Официальный плагин, который AOT компилирует ваши угловые компоненты и модули. Загрузчик работает с плагином WebPack для компиляции вашего Teadercript. Важно включить оба, так и не включать любой другой загрузчик компилятора.

Добавление main.aot.ts Файл

В SRC Папка Добавить main.aot.ts файл:

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';

import { AppModuleNgFactory } from './app/app.module.ngfactory';

enableProdMode();

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Ваш Главная Вход немного отличается в режиме производства и компиляция AOT:

Импорт EnableProdmode Чтобы отключить режим развития углов развития, который отключает утверждения и другие проверки в рамках.
Импорт PlatformBrowser И не PlatformBrowserdynamic Поскольку в AOT Compilation ваше приложение поставляется в браузере, уже скомпилированном, тогда как в JIT Compilation это происходит на уровне браузера.
Вместо импортирования AppModule Вам нужно импортировать AppModuleFactory Это ваше собранное приложение, созданное нашим угловым компилятором.

Добавление скриптов

Добавьте следующие сценарии на ваш Package.json файл:

"webpack-prod": "cross-env NODE_ENV=production webpack --mode production"

"build:prod": "npm run build:clean && ngc && npm run webpack-prod && npm run build:clean"

"build:clean": "del-cli 'src/**/*.js' 'src/**/*.js.map' 'src/**/*.ngsummary.json' 'src/**/*.metadata.json' 'src/**/**/*.ngfactory.ts' 'src/**/*.ngstyle.ts' 'src/**/*.shim.ts'"

"serve": "lite-server"

построить: чистый : Угловой компилятор генерирует много файлов, чтобы скомпилировать ваше приложение. Чтобы оставаться чистым в нашем проекте, мы удаляем все эти файлы перед компиляцией и после создания пучков.
построить: прод : Запустите угловой компилятор с NGC Команда, а затем запустите WebPack в режиме производства, чтобы создать свои пакеты.
обслуживать : Я использую Lite-Server для обслуживания нашего приложения и посмотреть, как выглядит. Конечно, вам не понадобится в реальном мире проекта, потому что ваше приложение будет служить облаком.

Теперь вы можете запустить NPM Run Build: Prod Чтобы скомпилировать ваше угловое приложение и построить свои пакеты. Тогда запустите NPM запустить Чтобы служить вашему приложению к браузеру.

Я надеюсь, что вам понравилось эту статью! Если у вас есть какие-либо вопросы/предложения, дайте мне знать в комментариях ниже.

Файлы проекта находятся на моем Github:

Samteb/Angular-7-WebPack-4 Вклад в разработку Samteb/Angular-7-WebPack-4, создавая учетную запись на Github. github.co

Оригинал: “https://www.freecodecamp.org/news/how-to-configure-webpack-4-with-angular-7-a-complete-guide-9a23c879f471/”

Angular 7: Настройка базового приложения

Настройка Teamscript

Конфигурация WebPack для режима разработки (счетано-временная компиляция)

Что такое WebPack?

Настройка WebPack

Добавление скриптов

Конфигурация WebPack для производства режима (опередив компиляции)

Преимущества компиляции AOT

Настройка WebPack

Добавление main.aot.ts Файл

Добавление скриптов

Читайте ещё по теме: