Setup project Elm với Webpack
TIL
655
Elm
4
webpack
6
White

Huy Trần viết ngày 03/08/2018

Note lại cho khỏi quên, không viết lách gì nhiều.

# Khởi tạo project
$ mkdir my-elm-project
$ cd my-elm-project
$ yarn init .

Cài packages:

# Cài webpack
$ yarn add webpack webpack-cli webpack-dev-server

# Cài các loader liên quan
$ yarn add elm-webpack-loader css-loader sass-loader style-loader node-sass file-loader url-loader

Cấu trúc thư mục dự án:

my-elm-project
├── package.json
├── src
│   ├── Main.elm
│   ├── Models.elm
│   ├── Views.elm
│   ├── index.html
│   ├── main.js
│   └── style.scss
├── webpack.config.js
└── elm-package.json

Trong đó, nội dung các file như sau:

elm-package.json

{
    "version": "1.0.0",
    "summary": "<helpful summary of your project, less than 80 characters>",
    "repository": "<https://github.com/user/project.git>",
    "license": "BSD3",
    "source-directories": [
        "src"
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 6.0.0",
        "elm-lang/html": "2.0.0 <= v < 3.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

src/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Elm Project</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="dist.js"></script>
    </body>
</html>

src/main.js

require('./index.html');
require('./style.scss');

const Elm = require('./Main.elm');
Elm.Main.embed(document.getElementById("root"));

Nội dung các file .elm là tùy vào bạn. Lưu ý cách chia module mình thường dùng là Model nằm trong một file, toàn bộ các View nằm trong một file, và Main file chỉ để làm entry point, ví dụ:

src/Models.elm

module Models exposing (..)

type Msg = NoOp

type alias Model = Int

src/Views.elm

module Views exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)

import Models exposing (..)

dummyView : Html Msg
dummyView =
   div [] [ text "Hello World" ]

src/Main.elm

module Main exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)

import Models exposing (..)
import Views exposing (..)

model : Model
model = 0

update : Msg -> Model -> Model
update msg model =
    case msg of
        NoOp -> model

view : Model -> Html Msg
view model =
    dummyView

main : Program Never Model Msg
main = Html.beginnerProgram
       { model = model
       , view = view
       , update = update
       }

Cuối cùng, và quan trọng nhất, là file config Webpack:

webpack.config.js

var path = require('path');

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'dist.js'
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        loader: 'file-loader?name=[name].[ext]'
      },
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader: 'elm-webpack-loader?verbose=true&warn=true'
      }
    ],
    noParse: /\.elm$/,
  },
  devServer: {
    inline: true,
    stats: { colors: true }
  }
};

Run project bằng:

$ webpack-dev-server

Khi deploy thì chỉ cần:

$ webpack -p

Và copy file index.html cùng dist.js để deploy.

huytd 04-08-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Huy Trần

118 bài viết.
1854 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
173 46
Tại sao phải viết blog kĩ thuật? Có rất nhiều bài viết trên mạng nói về vấn đề tại sao một lập trình viên nên thường xuyên viết các bài blog kĩ thu...
Huy Trần viết hơn 3 năm trước
173 46
White
151 39
(Ảnh) Tiếp tục sêri (Link) lần này, chúng ta sẽ cùng tìm hiểu và mô phỏng lại một chức năng mà mọi người đang bắt đầu sử dụng hằng ngày, đó là chứ...
Huy Trần viết hơn 2 năm trước
151 39
White
113 17
Phần 1: Tự truyện Tui và Toán đã từng là hai kẻ thù không đội trời chung trong suốt hơn mười lăm năm ròng rã. Ngay từ ánh nhìn đầu tiên đã ghét nh...
Huy Trần viết hơn 2 năm trước
113 17
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 7 tháng trước
0 2
White
0 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 4 ngày trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
118 bài viết.
1854 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!