Setup project Elm với Webpack
TIL
610
Elm
4
webpack
5
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

111 bài viết.
1627 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
161 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 3 năm trước
161 46
White
149 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 2 năm trước
149 39
White
106 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
106 17
Bài viết liên quan
White
12 2
Sorry mọi người vì lâu rồi mới lại viết phần tiếp theo của series webpack này, hoàn thành được bài này xong giống như thoát được vấn đề nút cổ chai...
Dinh Duong viết 5 tháng trước
12 2
White
20 2
(Ảnh) Code splitting (chia nhỏ code) là một trong những tính năng làm nên tên tuổi của Webpack. Và với riêng bản thân mình thấy thì đây chính là t...
Dinh Duong viết hơn 1 năm trước
20 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
111 bài viết.
1627 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á!