Skip to content

Instantly share code, notes, and snippets.

@praveenperera
Last active June 13, 2019 06:59
Show Gist options
  • Save praveenperera/3bb27ac7f7f895c6665a9b6946dec268 to your computer and use it in GitHub Desktop.
Save praveenperera/3bb27ac7f7f895c6665a9b6946dec268 to your computer and use it in GitHub Desktop.
Webpack 2.0 for Phoenix (Elixir) working with sass (scss), Image files, CSS, Font Files and jQuery
import webpack from "webpack";
import ExtractTextPlugin from "extract-text-webpack-plugin";
import CopyWebpackPlugin from "copy-webpack-plugin";
import WebpackNotifierPlugin from "webpack-notifier";
const extractSass = new ExtractTextPlugin({
filename: "css/app.css"
});
export default {
entry: ["./web/static/css/app.scss", "./web/static/js/app.js"],
output: {
path: `${__dirname}/priv/static`,
filename: "./js/app.js",
publicPath: "/"
},
resolve: {
modules: ["node_modules", `${__dirname}/web/static/js`]
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
include: __dirname
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
includePaths: [`${__dirname}/node_modules`],
sourceMap: true
}
}
]
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [
{
loader: "css-loader",
options: {
includePaths: [`${__dirname}/node_modules`],
sourceMap: true
}
},
"resolve-url-loader",
{
loader: "sass-loader",
options: {
includePaths: [`${__dirname}/node_modules`],
sourceMap: true
}
}
],
fallback: "style-loader"
})
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "../static/fonts/",
publicPath: "../fonts/"
}
},
{
test: /\.(jpg|png|gif)$/,
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "../static/images/",
publicPath: "../images/"
}
}
]
},
plugins: [
new CopyWebpackPlugin([
{
from: `${__dirname}/web/static/assets`,
to: `${__dirname}/priv/static/`,
ignore: [".DS_Store"]
}
]),
new WebpackNotifierPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
extractSass
]
};
@praveenperera
Copy link
Author

praveenperera commented Apr 26, 2017

package.json

  "scripts": {
    "deploy": "NODE_ENV=production webpack -p",
    "watch": "webpack --watch-stdin --color"
  }

@praveenperera
Copy link
Author

dev.exs

  watchers: [npm: ["run", "watch", cd: Path.expand("../", __DIR__)]]

@praveenperera
Copy link
Author

praveenperera commented Apr 26, 2017

.babelrc

{ "presets": ["latest", "react", "stage-0"] }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment