Hello World configured under Webpack window

The one area of the twists 90 percent

First look at the effect: (This effect is webpack after execution will be generated after the build folder has its index.html, click Index.html is the effect)

Installation

Install node and NPM first, because Webpack is a node-based project. And then

NPM install-g Webpack

General overview

The official website defines webpack as the module bundler, whose purpose is to package the various files that have dependencies into a series of static resources. Please look

Webpack is simply a configuration file, and all the magic is happening in this file. This configuration file is divided into three main chunks

Entry entry file let Webpack use which file as the entry for the project
Output export let Webpack where to put the finished files.
Module module to use what different modules to handle various types of files

Now let's step through a simple project
Build a project

Build a folder, and then create a new Package.json file in the project root directory

mkdir Webpack
CD Webpack
NPM Init
# Keep It up, if you don't bother filling in some information

If you use Git to manage your project, it is recommended that you create a new. gitignore file, do not let git submit some Node-dependent modules, you can also refer to the GitHub example Gitignore/node.gitignore at Master Github/gitignore GitHub

Let's just be a little simpler here.

Node_modules


Project structure

Now there is a Package.json in the project, we add something, slowly enrich its content.

/app
Index.js
Sub.js
Package.json
Webpack.config.js

Add two JS files, add the most important webpack configuration file, we still start from very simple Hello World, webpack native directly support AMD and COMMONJS two formats, if you want to use ES6 style, this later mention.
JS Code

Sub.js

We use the Commonjs style here.
function Generatetext () {
var element = document.createelement (' h2 ');
element.innerhtml = "Hello H2 World";
return element;
}

Module.exports = Generatetext;

Index.js

var sub = require ('./sub ');
var app = document.createelement (' div ');
app.innerhtml = ' App.appendchild (Sub ());
Document.body.appendChild (APP);

After writing the code, complete a simple function, create a separate module, and refer to it in another module, and end up with two titles in the page.
Configure Webpack

Now start configuring Webpack, the goal is to combine these two JS files into a single file. We can manually build a index.html folder in the Build folder, and then the merge after the JS reference in the inside, but this is a bit troublesome, so we install a plugin here, can automatically help us to generate HTML quickly.

NPM Install Html-webpack-plugin--save-dev

Well, with this plugin, start writing the config file.

var path = require (' path ');
var htmlwebpackplugin = require (' Html-webpack-plugin ');
Defines the path to some folders
var Root_path = path.resolve (__dirname);
var App_path = path.resolve (Root_path, ' APP ');
var Build_path = path.resolve (Root_path, ' BUILD ');

Module.exports = {
The folder name of the project can be found directly by default Index.js can also determine which file name
Entry:app_path,
The file name of the output after the merge JS will be named Bundle.js
Output: {
Path:build_path,
FileName: ' Bundle.js '
},
Adding our plugin will automatically generate an HTML file.
Plugins: [
New Htmlwebpackplugin ({
Title: ' Hello World App '
})
]
};

Then run in the project root directory

Webpack

The terminal displays a bunch of information and then tells you that it was successful.

I would like to say: "Your uncle, finally conquered you!!!"

Halfway through you will encounter problems: Cannot find module ' Webpack/lib/node/nodetemplateplugin ';

Solution: http://www.cnblogs.com/meij/p/5208214.html

Hello World configured under Webpack window