Chuyển từ Brunch sang Webpack project Phoenix
TIL
593
phoenix
2
elixir
33
webpack
4
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 hơn 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 hơn 1 năm 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 hơn 1 năm trước
8 0
Bài viết liên quan
White
1 0
Xem bài viết gốc trên (Link) Bài viết này sẽ hướng dẫn các bạn sử dụng ETS như là bộ nhớ cache để tăng tốc các ứng dụng web Phoenix Dành cho ...
Dung Nguyen viết 2 tháng trước
1 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á!