Chuyển từ Brunch sang Webpack project Phoenix

TIL

593

phoenix

2

elixir

33

webpack

4

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");