Preliminary Webpack Pack

First contact with Webpack, learn how to use Webpack packaging, record the process.

1. Install Webpack in the project root directory

$ NPM Install Webpack--save-dev

2. Create a new Webpack.config.js

3. Install the required loader as needed and configure it in the Webpack.config.js module, such as Load Babel.

$ NPM Install Babel-loader--save-dev

Webpack.config.js file

var webpack = require (' Webpack '); var commonsplugin = new Webpack.optimize.CommonsChunkPlugin (' Common.js '); Module.exports = {//Page entry file Configuration entry: {' A ': './src/a.js ',},//Portal file output config: {path: './build ', filename: ' [name].js '}, Module: {  loaders: [  {test:/\.js|jsx$/, loaders: [' Babel ']},  ]},resolve:{extensions: [', '. js ', '. JSON ', '. Scss '}}

Webpack after a simple installation, look at the project directory

A.js and B.js under SRC

A.js:

var B = require ("./b"); Console.log (B.add);

B.js:

Module.exports.add=function (b) {return a + B;}

Because the previous webpack.config.js has been configured, and then

$ webpack-w

We will find that this file was introduced in build under a a.js,index.html, and the console will output 3.

Simple record, if wrong, we can correct, thank you ha

Preliminary Webpack Pack