Chuyển từ Brunch sang Webpack project Phoenix
TIL
498
phoenix
1
elixir
25
webpack
3
White

Giang Nguyen viết ngày 26/07/2017

Mặc định Phoenix dùng Brunch để thực hiện việc như transpile từ es6 -> javascription, hoặc compile từ scss/sass sang css. Tuy nhiên mình có đọc qua docs nó và config cũng đơn giản, nhưng thấy khá ít plugins này nọ, cộng đồng cũng ít. Một điểm nữa là project hiện tại code dùng khá cũ từ thời 2012, nên mình muốn chuyển sang 1 tool mới để quản lý static assets tốt hơn, mình chọn webpack - cung cấp đầy đủ đồ chơi, cộng đồng lớn.

webpack.config.js (webpack >= 3)

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const config = {
    entry: path.resolve(__dirname, "js/main.js"),
    resolve: {
        modules: [
            "node_modules",
            path.resolve(__dirname, ".")
        ],
        extensions: [".js", ".css", ".json", ".scss"],

        alias: {
            "jquery.ui": path.resolve(__dirname, "vendor/js/jquery-ui-1.10.3.custom.min.js"),

            "jquery.cookie": path.resolve(__dirname, "vendor/js/jquery.cookie.js"),

            "jquery.filterInput": path.resolve(__dirname, "vendor/js/jquery.filterInput.js"),

            "jquery.form": path.resolve(__dirname, "vendor/js/jquery.form.min.js"),

            "jquery.getUrlVars": path.resolve(__dirname, "vendor/js/jquery.getUrlVars.js"),

            "jquery.menu-aim": path.resolve(__dirname, "vendor/js/jquery.menu-aim.js"),

            "jquery.mousewheel": path.resolve(__dirname, "vendor/js/jquery.mousewheel.min.js"),

            "jquery.ui.touch-punch": path.resolve(__dirname, "vendor/js/jquery.ui.touch-punch.min.js")
        }
    },

    devtool: "source-map",

    output: {
        path: path.resolve(__dirname, "../priv/static"),
        filename: "js/bundle.js"
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.svg$/,
                loader: "file-loader?name=img/[name].[ext]"
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/bundle.css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery'",
            "window.$": "jquery"
        })
    ]
};

module.exports = config;

dev.exs

...
watchers: [node: ["node_modules/webpack/bin/webpack.js", "--watch", "--color",
                    cd: Path.expand("../assets", __DIR__)]]
...

Khi bạn dùng plugins jquery, khi gặp một số trường hợp plugins không hiểu được context window, bạn dùng imports-loader để giải quyết trường hợp này, ví dụ:

require("imports-loader?this=>window!jquery.getUrlVars");
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

Giang Nguyen

20 bài viết.
34 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
30 5
(Ảnh) Hai ngày nay mình đã tìm hiểu về Amazon S3, Cloudfront và Letsencrypt để xây dựng 2 trang web static, thứ nhất là trang chủ của (Link) và t...
Giang Nguyen viết 1 năm trước
30 5
White
9 0
Đôi dòng về ID3 (Ảnh) Nếu bạn nào chưa biết thì có thể đọc phần này, hoặc biết rồi thì có thể next tới phần kế tiếp nhé. 1. Giới thiệu Như hì...
Giang Nguyen viết 12 tháng trước
9 0
White
8 0
Type Result Type trên dùng để làm gì? Result được dùng cho những trường hợp chúng ta muốn return lại một giá trị nào đó (Ok) hoặc propagating erro...
Giang Nguyen viết 11 tháng trước
8 0
Bài viết liên quan
White
8 6
Chưa xem phần 2? Xem (Link) Trong bài viết này tôi giới thiệu cho các bạn về khái niệm function arity, một cách gọi mĩ miều của số lượng argument ...
Lơi Rệ viết hơn 2 năm trước
8 6
White
0 0
Custom Ecto.Type Version hiện tại của Ecto.Type không support một số datatype sử dụng khi validate. Ví dụ như MapSet. Thành ra đành phải tự viết đ...
Vie viết 8 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


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