Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Packs CommonJs/AMD/Labeled Modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff.
Webpack is a powerful module bundler for JavaScript applications. It processes applications by internally building a dependency graph which maps every module your project needs and generates one or more bundles. It is highly extensible via loaders and plugins, and it's designed to manage, transform, and bundle frontend assets like JavaScript, CSS, and images.
Module Bundling
Webpack bundles all the JavaScript files and other assets like CSS and images into a single output file. The code sample shows a basic webpack configuration defining an entry point and the output bundle.
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
Loaders
Loaders allow webpack to process different types of files and convert them into modules that can be included in your bundle. The code sample demonstrates how to use loaders to handle .txt and .css files.
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
};
Plugins
Plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management, and environment variable injection. The code sample shows how to use the HtmlWebpackPlugin to generate an index.html file with the bundled assets injected.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
};
Development Server
Webpack provides a development server that can be used to serve your application during development. It supports live reloading. The code sample configures the webpack development server to serve files from the 'dist' directory.
module.exports = {
devServer: {
contentBase: './dist',
open: true
}
};
Code Splitting
Code splitting allows you to split your code into various bundles which can then be loaded on demand or in parallel. The code sample shows how to split the application and vendor code into separate bundles.
module.exports = {
entry: {
app: './src/app.js',
vendor: './src/vendor.js'
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist'
}
};
Rollup is a module bundler for JavaScript which uses a flat bundle approach that's more efficient for libraries and applications with a complex module structure. It's known for its tree-shaking capabilities, which eliminate unused code.
Parcel is a web application bundler that offers a zero-configuration setup. It's known for its fast bundle times and out-of-the-box support for many file types without the need for additional plugins or loaders.
Browserify lets you require('modules') in the browser by bundling up all of your dependencies. It's been around longer than webpack and has a simpler approach, but it lacks some of the more advanced features and optimizations that webpack offers.
FuseBox is a bundler/module loader that combines the power of webpack, JSPM, and SystemJS. It introduces a streamlined workflow and has a powerful API. It's known for its speed and simplicity.
webpack is a bundler for modules. The main purpose is to bundle javascript files for usage in browser.
TL;DR
Check the documentation if you want to know more...
Take a look at the examples
folder.
var commonjs = require("./commonjs");
require: "./labeled";
define(["amd-module", "./file"], function(amdModule, file) {
require(["big-module/big/file"], function(big) {
// AMD require acts as split point
// and "big-module/big/file" is only downloaded when requested
var stuff = require("../my/stuff");
// dependencies automatically goes in chunk too
});
});
require("coffee!./cup.coffee");
// The loader syntax allows to proprocess files
// for common stuff you can bind RegExps to loaders
// if you also add ".coffee" to the default extensions
// you can write:
require("./cup");
function loadTemplate(name) {
return require("./templates/" + name ".jade");
// dynamic requires are supported
// while compiling we figure out what can be requested
// here everything in "./templates" that matches /^.*\.jade$/
// (can also be in subdirectories)
}
require("imports?_=underscore!../loaders/my-ejs-loader!./template.html");
// you can chain loaders
// you can configure loaders with query parameters
// and loaders resolve similar to modules
// ...you can combine everything
function loadTemplateAsync(name, callback) {
require(["bundle?lazy!./templates/" + name + ".jade"], function(templateBundle) {
templateBundle(callback);
});
}
You can run the unit tests with npm test
.
You can run the browser tests:
cd test/browsertests
node build
and open tests.html
in browser.
You are welcome to contribute by writing issues or pull requests. It would be nice if you open source your own loaders or webmodules. :)
You are also welcome to correct any spelling mistakes or any language issues, because my english is not perfect...
Copyright (c) 2012-2013 Tobias Koppers
MIT (http://www.opensource.org/licenses/mit-license.php)
FAQs
Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
The npm package webpack receives a total of 20,319,984 weekly downloads. As such, webpack popularity was classified as popular.
We found that webpack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.