Skip to content

Instantly share code, notes, and snippets.

@fdietz
Last active June 29, 2018 17:32
Show Gist options
  • Save fdietz/400e7eed190bf2aff349 to your computer and use it in GitHub Desktop.
Save fdietz/400e7eed190bf2aff349 to your computer and use it in GitHub Desktop.
Phoenix Framework Webpack Integration (replacing Brunch)
{
"presets": ["es2015", "react", "babel-preset-stage-0"]
}
# lib/mix/tasks/digest.ex
defmodule Mix.Tasks.WebpackIntegration.Digest do
use Mix.Task
def run(args) do
Mix.Shell.IO.cmd "./node_modules/webpack/bin/webpack.js -p"
:ok = Mix.Tasks.Phoenix.Digest.run(args)
end
end
# added phoenix.digest alias
defp aliases do
[
"ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
"ecto.reset": ["ecto.drop", "ecto.setup"],
"phoenix.digest": "webpack_integration.digest"
]
end
{
"repository": {},
"dependencies": {},
"devDependencies": {
"autoprefixer-loader": "^3.1.0",
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"copy-webpack-plugin": "^0.3.3",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^0.9.1",
"file-loader": "^0.8.5",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.9"
},
"scripts": {
"compile": "webpack -p"
}
}
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebPackPlugin = require("copy-webpack-plugin");
var env = process.env.MIX_ENV || 'dev'
var prod = env === 'prod'
var plugins = [
new ExtractTextPlugin("css/app.css"),
new CopyWebPackPlugin([
{ from: "./web/static/assets" },
{ from: "./deps/phoenix_html/web/static/js/phoenix_html.js",
to: "js/phoenix_html.js"
},
{ from: "./deps/phoenix/web/static/js/phoenix.js",
to: "js/phoenix.js"
}
])
];
if (prod) {
plugins.push(new webpack.optimize.UglifyJsPlugin())
}
module.exports = {
devtool: "source-map",
entry: {
"app": ["./web/static/js/app.js", "./web/static/css/app.scss"]
},
output: {
path: "./priv/static",
filename: "js/app.js"
},
resolve: {
modulesDirectories: [__dirname + "/web/static/js"],
alias: {
phoenix_html: __dirname + "/deps/phoenix_html/web/static/js/phoenix_html.js",
phoenix: __dirname + "/deps/phoenix/web/static/js/phoenix.js"
}
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel",
query: {
presets: ["es2015"]
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style", "css")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css!sass?includePaths[]=" + __dirname + "/node_modules!autoprefixer?browsers=last 2 versions"
)
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url?limit=10000'
},
{
test: /\.woff$/,
loader: 'url?limit=100000'
}
]
},
plugins: plugins
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment