เริ่มต้น Angular ด้วย AngularCLI + Webpack + HotLoader

ก่อนอื่นต้องขอสวัดดีคนที่มาเสพบทความนี้นะคับ ผมไม่เคยเขียนบทความมาก่อนอาจจะอ่านแล้วไม่เร้าใจ หรือ ภาษาอาจจะผิดพลาดไปก็ขอขออภัยแล้วกัน

บทความนี้สำหรับคนเขียน Angular ที่อยากใช้ Hot Loader เหมือน เจ้าอื่นๆ แต่ยังอยากใช้ AngularCLI สำหรับ Generate สิ่งต่างๆที่อยากได้อยู่ก็เชิญเสพครับ

/// ขอเข้าเรื่องเลยนะคับ ///

ขั้นแรกก็ใช้ AngularCLI ปกติคับ โดยการสร้างโปรเจค ก่อนเลย

ng new ProjectName

เสร็จแล้วจะได้ประมาณนี้นะคับ

จากนั้นก็ลง Dev Dependencies เพิ่มอีกนิดหน่อยตามนี้เลยนะคับ

npm install @angularclass/hmr @angularclass/hmr-loader angular2-template-loader awesome-typescript-loader css-loader extract-text-webpack-plugin file-loader html-loader html-webpack-plugin raw-loader style-loader webpack webpack-dev-server webpack-merge --save-dev

มาถึงตรงผมคงต้องขออนุญาตลบ Test และส่วนที่ไม่ได้ใช้ออกทั้งหมดนะคับเพื่อให้โปรเจคดูเรียบง่ายสบายตาส่วน Test เอาไว้รอบหน้าแล้วกัน ไฟล์ที่ต้องลบก็ตามนี้เลยน่ะคับ

  • e2e/
  • src/assets/
  • src/environments/
  • src/test.ts
  • src/tsconfig.spec.json
  • src/typings.d.ts
  • .editorconfig
  • karma.conf.js
  • protractor.conf.js
  • tslint.json

แล้วก็ในไฟล์ package.json ตรง devDependencies

  • @types/jasmine
  • codelyzer
  • jasmine-core
  • jasmine-spec-reporter
  • karma
  • karma-chrome-launcher
  • karma-cli
  • karma-jasmine
  • karma-jasmine-html-reporter
  • karma-coverage-istanbul-reporter
  • protractor
  • ts-node
  • tslint

เสร็จแล้วก็จะเหลือประมาณนี้น่ะคับ จากนั้นก็สร้างไฟล์ และ โฟลเดอร์ตามนี้คับ

  • config/
  • config/helpers.js
  • config/vendor.ts
  • config/webpack.common.js
  • config/webpack.dev.js
  • config/webpack.prod.js
  • webpack.config.js

เสร็จแล้วให้ไปแก้ไฟล์ package.json ตรง scripts ตามนี้นะคับ

"scripts": {
"server": "webpack-dev-server --inline --progress --port 8080",
"start": "npm run server -- --hot",
"build": "webpack --config config/webpack.prod.js --progress --profile --bail"
}

จากนั้นก็แก้ไฟล์ตามนี้นะคับ

  • .angular-cli.json
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "start-angular-webpack-hotloader"
    },
    "apps": [{
        "root": "src",
        "outDir": "dist",
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "tsconfig": "tsconfig.app.json",
        "prefix": "app",
        "styles": [
             "styles.css"
        ],
        "scripts": [],
        "environmentSource": "environments/environment.ts",
        "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
        }
}],
    "lint": [{
"project": "src/tsconfig.app.json"
    }],
    "defaults": {
        "styleExt": "css",
        "component": {}
    }
}
  • src/environments/environment.prod.ts
export const environment = {
    production: true
};
  • src/environments/environment.ts
export const environment = {
    production: false
};
  • src/main.ts
  • src/polyfills.ts
  • src/tsconfig.app.json
{
"extends": "./../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": [
"node"
]
}
}
  • src / app / app.module.ts
  • src / app / app.component.ts

เพียงเท่านี้ก็เสร็จแล้วคับ จากนั้นก็สั่งรันได้เลย

#### ก่อน Run อย่าลืมลบ ไฟล์ .spec.ts ทิ้งด้วยนะคับ เดียว error ####

/// Run dev on AngularCLI # ไม่มี Hot Loader 
ng serve
/// Run dev on Webpack # มี Hot Loader
npm start
/// Build on AngularCLI
ng build --prod --aot
/// Build on Webpack
npm run build

แต่ถ้าอยากง่ายกว่านี้ ก็ Clone มาใช้ได้เลยคับ

https://github.com/Aitthi/Angular-Webpack-hot

หวังว่าบทความนี้จะมีประโยชน์นะคับ

########################################################################################