X

Sections

Get StartedContribute

Configuration

Edit this Page  

Webpack is fed a configuration object. It is passed in one of two ways depending on how you are using webpack: through the terminal or via Node. Learn more about the various ways this can be done in Passing a Configuration. All the available configuration options are specified below.

tip
Notice that throughout the configuration we use Node's built-in path module. This prevents file path issues between operating systems. See this section for more.

Configuration Options

{
  // click on the name of the option to get to the detailed documentation
  // click on the items with arrows to show more examples / advanced options

entry: "./app/entry", // string | object | array entry: ["./app/entry1", "./app/entry2"], entry: { a: "./app/entry-a", b: ["./app/entry-b1", "./app/entry-b2"] },
// Here the application starts executing // and webpack starts bundling output: { // options related how webpack emits results path: path.resolve(__dirname, "dist"), // string // the target directory for all output files // must be an absolute path (use the node.js path module)
filename: "bundle.js", // string filename: "[name].js", // for multiple entry points filename: "[chunkhash].js", // for long term caching
// the filename template for entry chunks
publicPath: "/assets/", // string publicPath: "", publicPath: "https://cdn.example.com/",
// the url to the output directory resolved relative to the HTML page library: "MyLibrary", // string, // the name of the exported library
libraryTarget: "umd", // enum libraryTarget: "umd-module", // ES6 module wrapped in UMD libraryTarget: "commonjs-module", // ES6 module wrapped in CommonJs libraryTarget: "commonjs2", // exported with module.exports libraryTarget: "commonjs", // exported as properties to exports libraryTarget: "amd", // defined with AMD defined method libraryTarget: "this", // property set on this libraryTarget: "var", // variable defined in root scope
// the type of the exported library
/* Advanced output configuration (click to show) */ pathinfo: true, // boolean // include useful path info about modules, exports, requests, etc. into the generated code chunkFilename: "[id].js", chunkFilename: "[chunkhash].js", // for long term caching // the filename template for additional chunks jsonpFunction: "myWebpackJsonp", // string // name of the JSONP function used to load chunks sourceMapFilename: "[file].map", // string sourceMapFilename: "sourcemaps/[file].map", // string // the filename template of the source map location devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string // the name template for modules in a devtool devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string // the name template for modules in a devtool (used for conflicts) umdNamedDefine: true, // boolean // use a named AMD module in UMD library crossOriginLoading: "use-credentials", // enum crossOriginLoading: "anonymous", crossOriginLoading: false, // specifies how cross origin request are issued by the runtime
/* Expert output configuration (on own risk) */ devtoolLineToLine: { test: /\.jsx$/ }, // use a simple 1:1 mapped SourceMaps for these modules (faster) hotUpdateMainFilename: "[hash].hot-update.json", // string // filename template for HMR manifest hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string // filename template for HMR chunks sourcePrefix: "\t", // string // prefix module sources in bundle for better readablitity
}, module: { // configuration regarding modules rules: [ // rules for modules (configure loaders, parser options, etc.) { test: /\.jsx?$/, include: [ path.resolve(__dirname, "app") ], exclude: [ path.resolve(__dirname, "app/demo-files") ] // matching conditions, each accepting regular expression or string // test and include behave equal, both must be matched // exclude must not be matched (takes preferrence over test and include) // Best practices: // - Use RegExp only in test and for filename matching // - Use arrays of absolute paths in include and exclude // - Try to avoid exclude and prefer include issuer: { test, include, exclude }, // conditions for the issuer (the origin of the import) enforce: "pre", enforce: "post", // apply these rule even if rules are overriden (advanced option) loader: "babel-loader", // the loader which should be applied, it'll be resolve relative to the context options: { presets: ["es2015"] }, // options for the loader }, { test: "\.html$" use: [ // apply multiple loaders and options "htmllint-loader", { loader: "html-loader", options: { /* ... */ } } ] }, { oneOf: [ /* rules */ ] } // only use one of these nested rules { rules: [ /* rules */ ] } // use all of these nested rules (combine with conditions to be useful) { resource: { and: [ /* conditions */ ] } } // matches only if all conditions are matched { resource: { or: [ /* conditions */ ] } } { resource: [ /* conditions */ ] } // matches if any condition is matched (default for arrays) { resource: { not: /* condition */ } } // matches if the condition is not matched ],
/* Advanced module configuration (click to show) */ noParse: [ /special-library\.js$/ ], // do not parse this module unknownContextRequest: ".", unknownContextRecursive: true, unknownContextRegExp: /^\.\/.*$/, unknownContextCritical: true, exprContextRequest: ".", exprContextRegExp: /^\.\/.*$/, exprContextRecursive: true, exprContextCritical: true, wrappedContextRegExp: /.*/, wrappedContextRecursive: true, wrappedContextCritical: false, // specifies default behavior for dynamic requests
}, resolve: { // options for resolving module requests // (does not apply to resolving to loaders) modules: [ "node_modules", path.resolve(__dirname, "app") ], // directories where to look for modules extensions: [".js", ".json", ".jsx", ".css"], // extensions that are used alias: { // a list of module name aliasings "module": "new-module" // alias "module" -> "new-module" and "module/path/file" -> "new-module/path/file" "only-module$": "new-module", // alias "only-module" -> "new-module", but not "module/path/file" -> "new-module/path/file" },
/* alternative alias syntax (click to show) */ alias: [ { name: "module", // the old request alias: "new-module", // the new request onlyModule: true // if true only "module" is aliased // if false "module/inner/path" is also aliased } ],
/* Advanced resolve configuration (click to show) */ symlinks: true, // follow symlinks to new location descriptionFiles: ["package.json"], // files that are read for package description mainFields: ["main"], // properties that are read from description file // when a folder is requested aliasFields: ["browser"], // properites that are read from description file // to alias requests in this package enforceExtension: false, // if true request must not include an extensions // if false request may already include an extension moduleExtensions: ["-module"], enforceModuleExtension: false, // like extensions/enforceExtension but for module names instead of files unsafeCache: true, unsafeCache: {}, // enables caching for resolved requests // this is unsafe as folder structure may change // but preformance improvement is really big cachePredicate: (path, request) => true, // predicate function which selects requests for caching plugins: [ // ... ] // additional plugins applied to the resolver
},
devtool: "source-map", // enum devtool: "inline-source-map", // inlines SourceMap into orginal file devtool: "eval-source-map", // inlines SourceMap per module devtool: "hidden-source-map", // SourceMap without reference in original file devtool: "cheap-source-map", // cheap-variant of SourceMap without module mappings devtool: "cheap-module-source-map", // cheap-variant of SourceMap with module mappings devtool: "eval", // no SourceMap, but named modules
// enhance debugging by adding meta info for the browser devtools context: __dirname, // string (absolute path!) // the home directory for webpack // the entry and module.rules.loader option // is resolved relative to this directory
target: "web", // enum target: "webworker", // WebWorker target: "node", // node.js via require target: "async-node", // node.js via fs and vm target: "node-webkit", // nw.js target: "electron-main", // electron, main process target: "electron-renderer", // electron, renderer process target: (compiler) => { /* ... */ }, // custom
// the environment in which the bundle should run // changes chunk loading behavior and available modules
externals: ["react", /^@angular\//], externals: "react", // string (exact match) externals: /^[a-z\-]+($|\/)/, // Regex externals: { // object angular: "this angular", // this["angular"] react: { // UMD commonjs: "react", commonjs2: "react", amd: "react", root: "React" } }, externals: (request) => { /* ... */ return "commonjs " + request }
// Don't follow/bundle these modules, but request them at runtime from the environment stats: { /* TODO */ }, devServer: { /* TODO */ }, plugins: [ // ... ], // list of additional plugins
/* Advanced configuration (click to show) */ resolveLoader: { /* same as resolve */ } // separate resolve options for loaders profile: true, // boolean // capture timing information cache: false, // boolean // disable/enable caching watch: true, // boolean // enables watching watchOptions: { aggregateTimeout: 1000, // in ms // aggregates multiple changes to a single rebuild poll: true, poll: 500, // intervall in ms // enables polling mode for watching // must be used on filesystems that doesn't notify on change // i. e. nfs shares }, node: { /* TODO */ }, recordsPath: path.resolve(__dirname, "build/records.json"), recordsInputPath: path.resolve(__dirname, "build/records.json"), recordsOutputPath: path.resolve(__dirname, "build/records.json"), // TODO
}

Contributors:

Contributor to this pageContributor to this page