Skip to main content
100%

webpack2-config

✓ Published0🌍 Public
VVeronicaM
Last edited Feb 3, 2017
Created on Feb 3, 2017

This example shows a webpack 2 configuration file that sets up separate entry points for app and admin bundles, with output paths and public paths defined for the dist folder. The configuration uses `CommonsChunkPlugin` to extract shared code into a commons bundle, and `ExtractTextPlugin` to handle SCSS compilation into separate CSS files. Module rules apply `url-loader` for images under 10k, `babel-loader` with the `babel-preset-es2015` preset for JavaScript, and `sass-loader` chained through the CSS extraction plugin. The source is a JavaScript module exporting the config object.

AI-generated description

Similar vizzes

Loading thumbnail…

webpack configuration for webpack-es6-boilerplate

This example shows a minimal webpack configuration for the webpack-es6-boilerplate, defining how JavaScript source files are bundled. It sets the entry point to `babel-polyfill` and `./app/index.js`, outputs a single `bundle.js` to a `build` directory, and uses `babel-loader` to transpile `.js` files while excluding `node_modules`. The configuration also includes a development server on port 3000 serving from `./build` with inline mode enabled. The code directly references the webpack API, including `module.exports`, the `entry`, `output`, `module.loaders`, and `devServer` properties.

115Dkatz
72% match
Loading thumbnail…

bundle/index.html for webpack-es6-boilerplate

This example shows a minimal webpack setup for an ES6 project, producing a single-page HTML document that loads a compiled JavaScript bundle. The page contains no visible content or user interface, only an empty body with a script tag referencing `bundle.js`. The code demonstrates the entry-point plumbing of a webpack-built application, where the frontend relies entirely on the bundled output for any rendering or behavior. The files include the `index.html` shell and the webpack configuration source, indicating how a boilerplate project connects its build system to a basic HTML host page.

115Dkatz
63% match
Loading thumbnail…

Webpack Simple Hot Reloading

This example demonstrates a development setup for a Webpack project with hot module replacement (HMR), where the webpack-dev-server serves a bundle.js file to an index.html page on localhost:9000. The configuration enables live reloading during development by using the `--hot` and `--inline` flags, along with the `webpack.NamedModulesPlugin` for readable module names and `webpack.NoEmitOnErrorsPlugin` to suppress error output. The code defines an entry point at `./index.js` and outputs a bundle with inline source maps, using `DefinePlugin` to set the development environment. The scripts support both standard and Windows command-line syntax for starting the dev server.

NN0taN3rd
57% match
Loading thumbnail…

Using OpenLayers with Webpack

This example shows how to build an OpenLayers map with a Webpack-based build system. The map displays OpenStreetMap tiles via an `XYZ` source and centers on the equator at zoom level 2. The code imports `ol/Map`, `ol/View`, `ol/layer/Tile`, and `ol/source/XYZ`, and uses Babel with the `env` preset, along with `css-loader` and `style-loader` for bundling styles. The Webpack configuration compiles `main.js` into a single `bundle.js` loaded by `index.html`.

TThomasG77
56% match
Loading thumbnail…

The correct way to compile ES6 using babel...

This example shows how to configure Babel and Webpack to compile ES6 code into three separate module formats for different consumption contexts. It demonstrates three distinct build targets—Node.js unbundled, Node.js bundled, and browser bundled—each with its own Babel preset and package.json entry point. The code specifies `babel-preset-env` with environment-specific targets like `node: "6.10"` or `browsers: "last 2 versions, ie 10-11"`, and uses the `modules: false` option to enable tree shaking. The accompanying `package.json` and `webpack.config.js` files illustrate how to wire these build scripts together, with Webpack automatically selecting the appropriate entry point (`main`, `module`, or `browser`) based on the `target` setting.

66ewis
56% match
Loading thumbnail…

package.json for webpack-es6-boilerplate

This visualization displays the contents of a package.json file for a webpack-based ES6 boilerplate project, mapping dependencies and scripts as structured JSON. The code defines build and start commands using webpack and webpack-dev-server, while Babel presets handle ES2015 transpilation. The rendering relies on JSON syntax highlighting and indentation to reveal the hierarchical relationships between configuration fields, though no external charting libraries are used. The data source is the gist authored by 15Dkatz, presenting the full file without additional visual encoding beyond the raw text format.

115Dkatz
55% match
Loading thumbnail…

Gist bd978df74840af0f424ab50974f8489a

This example demonstrates how to integrate a specific version of jQuery with WordPress and Webpack. It shows two configuration steps: first, deregistering the default WordPress jQuery in `functions.php` via `wp_deregister_script` and an `init` action, and second, excluding jQuery from the bundle using `externals` in `webpack.config` while injecting it with `webpack.ProvidePlugin`. The code also references registering a newer jQuery version through WordPress hooks.

KKopylovVitalik
54% match
Loading thumbnail…

Javascript build tools

This example illustrates the JavaScript build-tool ecosystem, mapping tools like npm, yarn, rollup, and webpack to their roles as package managers or module bundlers. It uses plain DOM elements and D3 v7’s `select` and `version` to display text, while the underlying code demonstrates module syntax with named and default exports. The visualization’s source files show how `index.js` imports from `something.js` and `thing.js`, and the HTML references a rollup-injected bundle, clarifying how bundlers assemble local packages into browser-ready scripts.

BBart van Pelt
53% match