I’m trying to finalize the update of my older Phoenix app (ex338) to the Phoenix 1.4 conventions. The app still uses ExAdmin. I’m having a hard time figuring out how to transfer the brunch config to webpack. Here was my brunch-config.js
:
const neat = require('bourbon-neat').includePaths;
const bourbon = require('bourbon').includePaths;
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: {
'js/app.js': /^(js)|(node_modules)/,
'js/ex_admin_common.js': ['vendor/ex_admin_common.js'],
'js/admin_lte2.js': ['vendor/admin_lte2.js'],
'js/jquery.min.js': ['vendor/jquery.min.js']
}
},
stylesheets: {
joinTo: {
'css/app.css': /^(css)/,
'css/admin_lte2.css': ['vendor/admin_lte2.css'],
'css/active_admin.css': ['vendor/active_admin.css.css']
},
order: {
after: ['css/app.css'] // concat app.css last
}
},
templates: {
joinTo: 'js/app.js'
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to '/assets/static'. Files in this directory
// will be copied to `paths.public`, which is 'priv/static' by default.
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ['static', 'css', 'js', 'vendor'],
// Where to compile files to
public: '../priv/static'
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
sass: {
options: {
includePaths: bourbon.concat(neat)
}
}
},
modules: {
autoRequire: {
'js/app.js': ['js/app']
}
},
npm: {
enabled: true
}
};
Here is my new webpack.config.js
file:
const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const neat = require("bourbon-neat").includePaths;
const bourbon = require("bourbon").includePaths;
const bourbonNeatPaths = bourbon.concat(neat);
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
"./js/app.js": ["./js/app.js"].concat(glob.sync("./vendor/**/*.js"))
},
output: {
filename: "app.js",
path: path.resolve(__dirname, "../priv/static/js")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "sass-loader",
options: {
includePaths: bourbonNeatPaths
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: "../css/app.css" }),
new CopyWebpackPlugin([{ from: "static/", to: "../" }])
]
});
When I deploy it, the ExAdmin pages are plain html and I get errors in my javascript console that my ExAdmin .css
and .js
assets can’t be found Failed to load resource: the server responded with a status of 404 (Not Found)
. I tried adding those files into the entry
object, but that didn’t fix the problem.
Does anyone have an idea for how to update my webpack.config.js
? Thanks!