How to use @rails/webpacker - 10 common examples

// Remove the digest from the output js filename.
// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-581149092
//
environment.config.set("output.filename", chunkData => {
  return "[name].js"
})

// Remove the digest from the output css filename.
// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-581149092
//
// Inspect with:
//
//     console.log(environment.plugins)
//
const miniCssExtractPlugin = environment.plugins.get('MiniCssExtract')
miniCssExtractPlugin.options.filename = "[name].css"

module.exports = environment

const { environment } = require('@rails/webpacker')

// Remove the digest from the output js filename.
// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-581149092
//
environment.config.set("output.filename", chunkData => {
  return "[name].js"
})

// Remove the digest from the output css filename.
// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-581149092
//
// Inspect with:
//
//     console.log(environment.plugins)
//
const miniCssExtractPlugin = environment.plugins.get('MiniCssExtract')
miniCssExtractPlugin.options.filename = "[name].css"

module.exports = environment

const { environment } = require('@rails/webpacker')
const coffee =  require('./loaders/coffee')
const webpack = require('webpack')

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': 'tether',
    Popper: ['popper.js', 'default'],
    ActionCable: 'actioncable'
  })
)

environment.loaders.append('coffee', coffee)
// console.log(environment)
module.exports = environment

// User ES-next source from Normas for development
const babelLoader = environment.loaders.get('babel');
babelLoader.exclude = /node_modules(?!\/normas)/;

// Globalize jQuery
const oldToWebpackConfig = environment.toWebpackConfig;
environment.toWebpackConfig = () => {
  const config = oldToWebpackConfig.call(environment);
  config.resolve.alias = {
    jquery: 'jquery/src/jquery',
  };
  return config;
};

environment.loaders.append('source-map', {
  test: /\.js$/,
  use: ['source-map-loader'],
  enforce: 'pre'
});

module.exports = environment;

const { environment } = require('@rails/webpacker')

// Add global webpack configs here

const babelLoader = environment.loaders.get('babel')
babelLoader.test = /\.jsx?|.spec.js?$/

environment.loaders.delete('css')
environment.loaders.delete('moduleCss')
environment.loaders.delete('sass')
environment.loaders.delete('moduleSass')

environment.loaders.append('null', {
  test: /\.css$/,
  include: stylesheet => stylesheet.indexOf('@patternfly/react-styles/css/') > -1,
  use: ['null-loader']
})

environment.loaders.append('style', {
  test: /(\.css|\.scss|\.sass)$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    {
      loader: 'sass-loader',
      options: {
        modules: true,
        localIdentName: '[name]---[local]---[hash:base64:5]'
      }

environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))

const config = environment.toWebpackConfig();


config.resolve.alias = {
  jquery: 'jquery/src/jquery'
 };
// bootstrap jquery setup


environment.loaders.prepend('erb', erb)
module.exports = environment

const { environment } = require("@rails/webpacker")
const path = require("path")
const webpack = require("webpack")

// Fixes issues with resolving linked packages with peer dependencies when developing
environment.config.resolve.modules = [path.resolve("./node_modules")]
// environment.config.resolve.symlinks = false // Enabling this will make webpack-dev-server unable to watch for changes

// For whatever reason suddenly this was required
environment.loaders.append("babel", {
  test: /\.(js|jsx)$/,
    loader: "babel-loader"
  }
)

// Makes it possible to not import these very used components
environment.plugins.append(
  "ProvidePlugin",
  new webpack.ProvidePlugin({
    Account: ["api-maker/models/account", "default"],
    Hash: ["shared/hash", "default"],
    Layout: ["components/layout", "default"],
    Params: ["shared/params", "default"],
    Project: ["api-maker/models/project", "default"],
    PropTypesExact: "prop-types-exact",
    React: "react",

//             chunks: 'initial'
//           }
//         }
//       }
//     }
//   })
// })

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.plugins.append('ContextReplacement',
  new webpack.ContextReplacementPlugin(
    /moment[\/\\]locale$/,
    /ja|en-SG|en-au|en-ca|en-gb|en-ie|en-il|en-nz|de|fr|fu|zh-tw|zh-cn|zh-hk/
  )
)

module.exports = environment

use: {
    loader: "babel-loader",
    options: {
      cacheCompression: false,
      cacheDirectory: true
    }
  }
})
environment.loaders.prepend("yaml", {
  test: /\.ya?ml$/,
  exclude: /node_modules/,
  use: "js-yaml-loader"
})

// Makes it possible to not import these very used components
environment.plugins.append(
  "ProvidePlugin",
  new webpack.ProvidePlugin({
    Account: ["api-maker/models", "Account"],
    classNames: "classnames",
    Hash: ["shared/hash", "default"],
    I18n: ["shared/i18n", "default"],
    Layout: ["components/layout", "default"],
    Params: ["@kaspernj/api-maker", "Params"],
    Project: ["api-maker/models", "Project"],
    PropTypes: "prop-types",
    PropTypesExact: "prop-types-exact",
    React: "react",
    Routes: ["shared/routes", "default"],
    setStateAsync: ["shared/set-state-async", "default"],
    Task: ["api-maker/models", "Task"],

//           }
//         }
//       }
//     }
//   })
// })

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.plugins.append('ContextReplacement',
  new webpack.ContextReplacementPlugin(
    /moment[\/\\]locale$/,
    /ja|en-SG|en-au|en-ca|en-gb|en-ie|en-il|en-nz|de|fr|fu|zh-tw|zh-cn|zh-hk/
  )
)

module.exports = environment