webpack/docs

[OLD] documentation for webpack

documentation

NEW DOCS HAVE BEEN MOVED TO webpack/webpack.js.org

ATTENTION: If you are planning on updating the content here you must update the WIKI.

If you see an issue, or want to make a change, please submit an issue and pull request on the new page. We are working to migrate this content over to the new repo.

The documentation is generated from the contents of this wiki. Please make any content edits there.

building the documentation

If you would like to edit the layout, styling or scripts of the documentation, please follow these steps:

• Install Node.js if you have not already
• git clone git://github.com/webpack/docs && cd docs
• npm install
• npm start
• Visit http://localhost:8088 to preview your changes before making a pull request.

docs's Issues

webpack cn doc

webpack cn doc

It occur a error when i use providePlugin

After I build the script file, and excuted on my page, it happen:



It seems because that those codes was not written in strict mode but run in strict mode. I can not modify the code source for some reason, how can i fix it by pass params when i build, such as

new webpack.ProvidePlugin({
   ...
   strictMode : false
})

what should i do?

[Wiki] ES6 Warning Obsolete

Isn't this warning about ES6 obsolete now that 1.13 has back-ported ES6 parser support from 2?

Redesign

#64 @gregvenech

[Wiki] Removed Watch from configuration page

externals isn't working

webpack.production.js

output: {
        filename: '[name]-[chunkhash].js',
        chunkFilename: '[name]-[chunkhash].js',
        path: path.join(__dirname, 'assets/dist'),
        libraryTarget: 'umd',
        library: 'lib',
        umdNamedDefine: true,
        publicPath: '/'
    },
    externals:{
        'react': {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        },
        'jquery': {
            root: 'jQuery',
            commonjs2: 'jquery',
            commonjs: 'jquery',
            amd: 'jquery'
        },
        'react-dom':{
            root:'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd:'react-dom'
        }
    },
    resolve:{
        alias:{
            react:path.join(node_modules,'./react/dist/react.min.js'),
            jquery:path.join(node_modules,'./jquery/dist/jquery.min.js'),
            'react-dom':path.join(node_modules,'./react-dom/dist/react-dom.min.js')
        }
    },
    module: {
        noParse:[
            path.join(node_modules,'./react/dist/react.min.js'),
            path.join(node_modules,'./jquery/dist/jquery.min.js'),
            path.join(node_modules,'./react-dom/dist/react-dom.min.js')
        ],
        loaders: [
            {
                test: /[\.jsx|\.js]$/,
                exclude: /node_modules/,
                loader: 'babel',
                presets: [
                    'react',
                    'es2015'
                ],
                query: {
                    cacheDirectory: true
                }
            }, {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            }, {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            }, {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&name=./images/[name]-[hash].[ext]'
            }, {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file?name=./font/[name]-[hash].[ext]'
            }, {
                test: /\.json$/,
                loader: 'json'
            }]
    },

lib.js

var React = require('react');
var JQuery = require('jquery');
var ReactDOM = require('react-dom');

window.React = React;
window.jQuery = JQuery;
window.$ = JQuery;
window.ReactDOM = ReactDOM;

the error in console

Uncaught ReferenceError: __WEBPACK_EXTERNAL_MODULE_2__ is not defined  external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}:1

Webpack -p via gulp ?

Hi, I'm wondering how would I achieve a production bundle webpack -p via gulp or webpack-stream. Through webpack.config.js ? I've been digging through the docs but couldn't find exactly what is different about webpack -p in terms of config

anchors: Omit parts in brackets

in "Motivation": Browserify can create multiple bundles

Noted here and here.

Browserify is also capable of creating multiple bundles (i.e., sharing modules from a common bundle). It's a bit more manual, which webpack has as a selling point over browserify.

webpack-validator

Hi,
i wrote a tool called webpack-validator to help people configuring webpack by providing a joi schema for the webpack config object. I'm now exploring possibilities to hint users at the existence of this tool -- the webpack documentation seems like a good place i'd say.
What do you think? Does this make sense? I'd be happy to PR if you'd point me to the location of the documentation where this would make sense.

Concept sketch: Search + Autocomplete

Motivation

I'm glad the webpack team is willing to accept contributions to revamp its documentation. One of the major challenges I faced after learning webpack basics was just sifting through the docs to find appropriate examples and configuration values.

While chapterwise organisation and #69 would be helpful, sometimes search would serve to be quicker way to navigate through the vast API surface webpack has.

Concept

Note: Information shown is for illustrative purposes only.

LHS

Text based search for keyword. Similar to google search results.

RHS

Semantic search results in the webpack API interface. Result sections can be divided into -

• Configuration Results
• Plugin Results
• Node API results
• CLI Results
  etc.

Schema

{
  config: [{
  name:resolve,
  short_description: "Options affecting the resolving of modules",
  link: "https://webpack.github.io/docs/configuration.html#resolve"
  options: [{
    name: "alias"
    short_description: "When trying to “resolve a module path” the module name is matched to the resolve.alias option",
        link:"..." //link
    }],
  }],
  plugins: [{
    // ...
  }],
  api: [{
    //...
  }],
}

Implementation

One could give the existing documentation the form of a JSON based API, with the nested structure coming from page hierarchy - Page -> H1 -> H2 -> H3 -> H4 and so on.

Or, documentation itself can be stored as a JSON and pages constructed out of it. I've not given this much thought.

OccurenceOrderPlugin -> OccurrenceOrderPlugin

"webpack": "2.0.1-beta"
OccurenceOrderPlugin -> OccurrenceOrderPlugin

Generate Source files in Tabs

Automatically convert: multiple code sections into a tabable container like on http://emberjs.com/
Thread the first line (if a comment) as filename (tab header)

webpack brand

This issue is dedicated to talk about the webpack brand (logo and design).

@shama created a first draft of the logo:

Add defaults to options docs

Is webpack using sane defaults? If so, could you list them under https://github.com/webpack/docs/wiki/webpack-options ?

Thx 😀

Fix server

https://raw.github.com -> https://raw.githubusercontent.com

Proposed Docs Outline

• Getting Started
  • What is webpack?
  • Installation
    • Node.js / webpack
  • Usage
    • cli usage
    • node.js script usage
  • Require Modules
    • Explain requiring local files, resolving local paths, module formats, dynamic names (and how it bundles potential modules), sync vs async
    • CommonJS
    • AMD
  • Vendor Modules
    • Explain installing from a vendor (copy/paste, npm, bower), resolving, how it doesnt bundle potential modules here.
    • npm
    • agnostic web_modules
    • bower
  • Using Loaders
    • coffee-loader
    • css/style-loader
    • file-loader
• Guides
  • How to write a loader
  • How to write a plugin
  • Optimization
  • Code Splitting
  • Long-time Caching
  • Usage with Grunt
  • Usage with gulp
  • Comparison
• API
  • Configuration
    • Usage and all options of webpack.config
  • CLI
    • Usage and all options of cli args
  • Node.js API
  • Runtime API
  • Loaders
    • APIs available to loaders
    • List of loaders
  • Plugins
    • APIs available to plugins
    • List of plugins
  • Chunks
  • Resolving Modules
  • Hot Module Replacement
  • require.context
  • require.ensure
  • require.include
  • Dev Tools
    • webpack-dev-server
    • webpack-dev-middleware
• Development
  • CHANGELOG
  • ROADMAP
  • IDEAS
  • CONTRIBUTING

absolute path with process.cwd

require(process.cwd()+'/path/to/module') - doesn't work. It should work for the isomorphic applications

How to HMR on server side?

It's mentioned on in the docs that Webpack also does HMR to server code, but how? Please can you add more details?
https://github.com/webpack/docs/wiki/hot-module-replacement

---

Updated:

Minimal example https://github.com/minimal-xyz/minimal-webpack-nodejs-hmr

Webpack playground

We need to rework the webpack playground. It should offer the possibility to fiddle around a bit and get in touch with the concepts of webpack.

There is already one but there are many features missing and the design is bootstrap's default design.

@sokra there was another playground to play around with chunks and hcr. Could you post the link?

cannot load css on demand in one single entry

for maintaining purpose, I have merged several entries into one single entry, and I am using require.ensure([], function(require) {}) to include my js and css file on demand, which looks like:

// common.js
if($('#is_a_page').length) {
 require.ensure(['a.js', 'a.css'], function(require) {
      require('a.js');
      require('a.css');
    });
}
else if($('#is_b_page').length) {
 require.ensure(['b.js', 'b.css'], function(require) {
      require('b.js');
      require('b.css');
    });
}


// a.js
alert('its page A');

// b.js
alert("its page B");

/*a.css*/
body{
  backgroung: #fff;
}

/*b.css*/
body{
  backgroung: #000!important;
}

then on both of page A and page B, I require the common.js and common.css

now, when I visit page A, it alerts "its page A" as expect, and "its page B" alerts on page B as well,
everything is perfectly fine, HOWEVER, on both page A and page B, the body's background turns to #000, it seems "require.ensure" only works on separating JS file whereas there is no way to separate two css files. Is that correct? any suggestions?

Is it possible to make webpack not write the result to disk?

Is it somehow possible to retrieve the resulting code and the respective sourcemap (from the stats object for example) and to instruct webpack not to write them to the file system at all?

getting started as one page?

Just voicing my opinion to address the human factor of the getting started page.

I think it should be one whole page, instead of multiple pages as it is currently.

This is because scrolling is so much easier than having to keep pressing the 'next' button.

docs dumped to file (pdf, mobi, epub)

Hello,

Is there any possibility to dump webpack documentation and/or tutorials to PDF and/or mobi files?

CLI option `--hot` not described in configuration docs

The documentation for configuration exhaustively describes all CLI / webpack.config.js options, but somehow option hot is not described there.

http://webpack.github.io/docs/configuration.html

Does webpack-dev-server always serve bundle from memory?

Using this config webpack-dev-server will serve the static files in your build folder and watch your source files for changes. When changes are made the bundle will be recompiled. This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same url path the bundle in memory will take precedence.

It doesn't seem to work the way it’s described here – when there's stuff in build folder, dev server still serves everything from memory. I also looked at source of webpack-dev-server and webpack-dev-middleware and it didn't seem that there's condition for not serving build from memory . An option to serve things directly from output.path folder would be helpful to test resulting production bundle.

I'd be happy to update the docs to reflect whatever goes on, wanted to get a confirmation that I'm correct.

Plugins page is 404

https://webpack.github.io/docs/plugins.html this page is 404

Remove disqus comments and usage page?

@sokra The comments on the docs seemed to be just getting filled with comments dissatisfied with the docs rather than trying to actually help. What do you think about just removing the comments?

Also I think we should remove this page as usage is generally covered in the other parts of the docs and people are getting confused:

http://webpack.github.io/docs/usage.html

Source-Map is picking random files

When I select a file in the chrome debugger, the file that actually opens is a random file from my project.

For example, I have the following file: /src/views/configuration/configuration-vm.ts.

When I open this file in the chrome debugger, a random file is loaded from my project instead. The random file is sometimes a .ts or a .html file. (However, the CSS files seem unaffected.)

NOTE: The WEBPACK FOOTER clearly says what the file name is along with its module ID.

The odd thing is that I have not updated WebPack for over a month.

Here are my versions:
Chrome: 51.0.2704.84
Webpack: 1.12.14

Please define "self-accept"

https://webpack.github.io/docs/hot-module-replacement-with-webpack.html uses the term "self-accept" assuming the developer knows what it means. I've read the prerequisites listed on that page (Using Plugins and Code Splitting) and still have no idea what "self-accept" means, based on the documentation alone.

How to use -p flag from node-js api?

Hi,
I have a script for my deployment which compiles modules for the entry points before running the webpack compiler. I would like to run the compiler with the -p flag using the node api (https://github.com/webpack/docs/wiki/node.js-api)
I can't see an option in the webpack config for this - is there one, or another way i can provide this argument to webpack?

Here is my script:

utils.runScript('node-scripts/generate-entries.jsx', ['--harmony'], (err) => {
    if (err) throw err;
    console.log('entries generated');
    const webpack = require('webpack');
    const webpackConfig = require('../webpack.config.js');
//want to add -p to this somehow
    webpack(webpackConfig, () => {
        console.log('deploy completed');
    });
});

Thanks,
Gilly

Document the dll/dll-user plugins

They aren't mentioned at all in the documentation but look to provide a very powerful feature https://github.com/webpack/docs/search?utf8=%E2%9C%93&q=dll

[Wiki] Component modules link returns 404

Component modules link in https://github.com/webpack/docs/wiki/examples#module-styles returns 404 error.
Component modules link in http://webpack.github.io/docs/examples.html#module-styles returns 404 error too.

There is no https://github.com/webpack/webpack/tree/master/examples/component directory.

Unreadable font

Please change normal text to more readable and standart font.

Chrome 33, Win 8.1:

stylus-loader

@shama something is broken with the sylus-loader as this doesn't compile anymore...

    ERROR in ./~/css-loader!./~/stylus-loader!./app/css/landing.styl
    Module build failed: TypeError: Arguments to path.join must be strings
        at f (path.js:204:15)
        at Object.filter (native)
        at exports.join (path.js:209:40)
        at Object.exports.lookupIndex (...\docs\node_modules\stylus-loader\node_modules\stylus\lib\utils.js:117:28)
        at ...\docs\node_modules\stylus-loader\lib\pathcache.js:101:25
        at when.reduce.then.result (...\docs\node_modules\stylus-loader\lib\pathcache.js:134:32)
        ,,,

[HMR] Cannot apply update. Aborted because not accepted

I am trying to get HMR working in a server environment (so on the Node side).

I think I am getting close, because I see webpack emitting an update and my if (module.hot) block is entered succesfully, but when I actually make a change I get an error like this:

[HMR] Cannot apply update.
[HMR] Error: Aborted because 20 is not accepted

Within one and the same file (the entry point to my app), I require a file and later accept updates to it:

var server = require('./src/server');
//...
server.render( /* .. */ );
// ...
// check if HMR is enabled
if(module.hot) {
    log.info('Module is HOT');            //  <-- This message gets printed
    // accept update of dependency
    module.hot.accept('./src/server');  
}

If I look into the generated code, I see that at the point of the require call, the string './src/server' is changed into the number 20, but at the point of the accept call it is not. There is still the same string there...

Any idea what the problem can be? How can I troubleshoot this?

Oh BTW... Happy New Year!!

Mis-typo on docs

on wiki/stylesheets

bottom javascript code block of one css file per entry had contained mis-typo:

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports {
// ...........^.... 

So I fixed this contents on webpack/docs - wiki.
I'm sorry to do this, if I could not have permission for modifying.

mangle option for UglifyJsPlugin is true, not false

In this document, http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin.

It says By default the mangle option is false., but actully the default mangle option is true. (We can infer this from the subsequent sentence But you can configure the plugin to avoid mangling specific variable names by passing an except list.) I also check the source code of UglifyJSPlugin at https://github.com/webpack/webpack/blob/master/lib/optimize/UglifyJsPlugin.js#L90 :
if(options.mangle !== false) {...}
Unless we explicitly give it a false value, it will still do the mangling thing.

commonjs2 library with externals uses value instead of key for require

Here is a minimal example (ZIP):

package.json

{
  "name": "webpack-externals-error",
  "version": "1.0.0",
  "description": "Minimal example demonstrating webpack externals error when exporting commonjs2 library",
  "main": "output.js",
  "scripts": {
    "prepublish": "webpack"
  },
  "author": "Mara Kim",
  "license": "ISC",
  "devDependencies": {
    "react": "^15.2.0",
    "webpack": "^1.13.1"
  }
}

webpack.config.js

module.exports = {
    entry: __dirname + '/index.js',
    output: {
        filename: 'output.js',
        path: __dirname,
        library: "Test",
        libraryTarget: "commonjs2",
    },
    externals: {
        react: "React",
    },
};

index.js

"use strict";

let React = require('react');

console.log(React);

To build:

npm install

If you check the resulting output.js, search for the line with module.exports = require(, which looks like:

    module.exports = require("React");

Expected output:

    module.exports = require("react");

It appears that webpack is incorrectly using the value instead of the key in the externals object to generate the require statement.

I want to contribute to the Testing page, but can't find it. Am I in the right repo?

I want to contribute to the testing documentation. I can't seem to find it in this repo, yet this is the only docs repo I know of…

Could you please help?

Automatically generate a contents of the current page

A floating contents on the right side... like wikipedia

Separate docs website

I think webpack should have a separate documentation website with its own branding. It looks more mature to most developers. What do you think?

We should choose a tool/service that generates a website from this documentation repository. It would be nice if everyone could contribute to this repository to improve the documentation - and changes would be instantly reflected on the official website.

I'm not sure if we should split the documentation into multiple pages or keep it in one with multiple headings. Sure, there is a lot of stuff to document but we should keep the docs short and precise.

A short research revealed these tools:

• DocumentUp
• Beautiful Docs

What do you think? I would love to create a branded theme 👍

Use dynamic script switch instead of `hot-dev-app.html`

Instead of having a separate html file for dev purposes you could do something like this in app.html:

<script>
  const script = document.createElement('script');
  script.src = (process.env.HOT) ? 'http://localhost:3000/dist/app.js' : '../dist/app.js';
  document.write(script.outerHTML);
</script>

Restructure content

We should make the documentation more beginner-friendly. This issue is dedicated to a discussion about how we could restructure the content. Proposals welcome :)

However, we should still address the needs of advanced users (webpack/webpack#1627)

The online analyze tool does not show parse errors

I tried to upload a stats.json file to the online analyze tool but it didn't work. In the browser console I can see some parse errors without details but the gui does not show any information at all. Since the stats.json is created by webpack it is hard for me to know what the analyzer has a problem with.
me to know what the analyzer has a problem with.

http://webpack.github.io/analyse/

It would also help if the analyzer page had some help information about how to create a stats.json etc.

Typo in docs

http://webpack.github.io/docs/library-and-externals.html

You have:

output: {
    // export itself to a global var
    libraryTarget: "var"
    // name of the global var: "Foo"
    library: "Foo",
},

The comma should be after libraryTarget: "var" and not after library: "Foo".

Remove 'devServer' option of webpack.config.js

https://github.com/webpack/docs/wiki/configuration

Doesn't seem to be supported. Didn't want to try removing it from the wiki without confirmation.

Italics/underscore formatting doesn't work

In the wiki, I see text like

Using this configuration, _webpack-dev-server_ will serve the static files

However, the underscores don't format the word between them:

Is this a GitHub issue?

Add dates to changelog

It would be nice to see a date next to each release in the changelog.

(OT: webpack and the webpack docs are excellent - thanks for a great tool.)

webpack report analysis page isn't working

http://webpack.github.io/analyse/

I'm not able to upload any file and get its report