Archived

We no longer use webpack.

--

@dimensionalpocket/development-webpack

This bundle complements @dimensionalpocket/development-js with Webpack dependencies and configuration defaults:

• webpack
• babel-loader - along with @babel/preset-env
• style-loader - along with css-loader and sass-loader
• sass - Dart Sass
• html-webpack-plugin
• webpack-dev-server

Webpack Configuration

In your webpack.config.js, you can import the default rules and plugins from this library:

var defaultBabelRule = require('@dimensionalpocket/development-webpack/rules/babel')
var defaultStyleRule = require('@dimensionalpocket/development-webpack/rules/style')

var defaultPlugins = require('@dimensionalpocket/development-webpack/plugins')

// If you want to modify the defaults, create a copy:
var babelRule = Object.assign({ exclude: /node_modules/ }, defaultBabelRule)

module.exports = {
  // ...
  module: {
    rules: [
      babelRule,
      defaultStyleRule,
      // ...
    ],
  },
  plugins: [
    ...defaultPlugins,
    // ...
  ]
}

You can also import all rules at once if you don't need to modify them:

var rules = require('@dimensionalpocket/development-webpack/rules')
var plugins = require('@dimensionalpocket/development-webpack/plugins')

module.exports = {
  module: {
    rules: [
      ...rules,
      // ... additional rules here
    ],
  },
  plugins: [
    ...plugins,
    // ... additional plugins here
  ]
}

And finally, if you just don't want to change any of the defaults or add new settings:

module.exports = require('@dimensionalpocket/development-webpack')

The above will import all default rules and plugins.

Installation

Install the package directly from GitHub (X.Y.Z == release tag):

npm i --save-dev -E github:dimensionalpocket/development-webpack#X.Y.Z

Note: @dimensionalpocket/development-js is a peer dependency and needs to be installed alongside this package.

License

MIT