How Webpack 4 works with Phoenix 1.4

Hello all, I want to understand better how Webpack works with Phoenix 1.4.

I’ve seen conflicting implementations on Github, so would be great to clarify how it interacts with Phoenix.

Here’s the default Webpack.config.js

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

    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']
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({ filename: '../css/app.css' }),
        new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
      ]
    });

One thing big thing I noticed is that this config does not specify the mode (ie. development or production). Therefore it will default to production according to the Webpack docs.

Is this on purpose? If so, why?

More specifically, how does this impact what packages should be added as DevDependencies vs general dependencies in Webpack?

In setting up Bootstrap 4, here’s how I set up my dependencies in Webpack:

    {
      "repository": {},
      "license": "MIT",
      "scripts": {
        "deploy": "webpack --mode production",
        "watch": "webpack --mode development --watch"
      },
      "dependencies": {
        "autoprefixer": "^9.3.1",
        "bootstrap": "^4.1.3",
        "coffeescript": "^2.3.2",
        "jquery": "^3.3.1",
        "node-sass": "^4.10.0",
        "phoenix": "file:../deps/phoenix",
        "phoenix_html": "file:../deps/phoenix_html",
        "popper.js": "^1.14.5",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^7.1.0"
      },
      "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "babel-loader": "^8.0.0",
        "copy-webpack-plugin": "^4.5.0",
        "css-loader": "^0.28.10",
        "mini-css-extract-plugin": "^0.4.0",
        "optimize-css-assets-webpack-plugin": "^4.0.0",
        "uglifyjs-webpack-plugin": "^1.2.4",
        "webpack": "4.4.0",
        "webpack-cli": "^2.0.10"
      }
    }

Basically, I added everything as dependencies and nothing as DevDependencies. Is this right? My hunch is no. My hunch is that everything should be a DevDependency, as Webpack will compile the assets and Phoenix will then compile the app.

My hunch is that the only two dependencies should be Phoenix and Phoenix_html. Even Jquery should be a DevDependency (or should it just be installed in node_modules and then just imported in Phoenix’s App.js without listing it as a dependency?).

So many potential conflicts here.

Would be great to get more insight into this!