Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
Chuyển từ Brunch sang Webpack project Phoenix
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");






