壹般我們寫頁面，大概都是這樣的結構：
index.html
css
style.css
js
index.js
...........
這樣我們的html裏直接引用css和js，完成壹個網頁應用。用webpack也類似，只是webpack把圖片、css和js都編譯打包成壹個文件，我們只需要引用壹個文件就可以了。
1.我們需要先安裝node環境。沒安裝的請自行安裝
2.在項目目錄下輸入npm init初始化壹個node項目，輸入項目名稱等信息，完成後生成壹個package.json文件。
3.在項目目錄下安裝webpack
npm install --save-dev webpack
4.我們需要壹個webpack.config.js文件，記錄webpack配置信息。它的配置大概這樣：
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
//入口文件
entry: {
index : './src/js/index.js'
},
extensions: ['', '.js', '.json', '.css', '.less'],
output: {
path: buildPath, //編譯後的文件路徑
filename: 'app.js'
},
module: {
//Loaders
loaders: [
//.css 文件使用 style-loader 和 css-loader 來處理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
//.js 文件使用 babel 來編譯處理
{ test: /\.js$/, loader: 'babel' },
//圖片文件使用 url-loader 來處理，小於8kb的直接轉為base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
};
module.exports = config;
我們需要指定編譯的入口文件和輸出的目錄路徑，以及css和js用什麽loader處理，比如我使用了less，要編譯less文件，就指定less-loader，js我要用es6來寫，為了兼容性，用babel來轉成es5的代碼。如果要使用react，也可以指定jsx等的編譯方式。
5.這些loader都是需要npm安裝的
npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015
6.如果需要用babel，在項目目錄下新建壹個名為.babelrc的隱藏文件，裏面這樣寫：
{"presets":["es2015"]}
保存。
7.根據配置可以看到我們需要壹個src文件夾和壹個build文件夾，src放圖片、css和js的源代碼，build作為輸出文件夾放編譯後的文件。
8.src/js/index.js文件作為我們的入口文件，我們在裏面可以愉快地寫es6的代碼，比如：
'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);
可以看到css我們都通過require的方式引進來，這樣webpack會把css和js打包進壹個文件。
9.我們還差個index.html，放在項目文件夾下就可以，正常寫，引入build/app.js就可以啦！
10.讓我們試試吧，在命令行項目目錄下運行webpack，哇，成功！
Time: **2622**ms
**Asset** **Size** **Chunks** **Chunk Names**
**app.js** 120 kB **0** **[emitted]** index
+ 10 hidden modules
可以看到app.js已經生成啦！