1、创建demo文件夹，创建package.json文件
npm init 初始化项目
2、安装webpack包
1.全局安装 cnpm install webpack@1 -g
2.项目安装 cnpm install webpack@1 --save
3、创建webpack.config.js文件
目录：demo/webpack.config.js
// 引入模块
var webpack = require('webpack');
4、核心模块放置的地方
五大模块：
entry：编辑入口文件，设置1个js入口模块；
output：编辑导出文件；
plugins：配置插件
module:加载的loaders
resolve：配置别名
module.exports = {
}
5、接下来配置所有页面
创建文件夹和文件：
文件目录
6、编辑index.html文件
创建index.html文件
7、编辑index.css文件
body{
background:pink;
color:red;
}
8、编辑index.js文件
var s=function(data) {
console.log(data);
}
module.exports.fn=s;
9、编辑app.js文件
var index=require('./index.js');
require('../stylesheets/index')
index.fn('init index');
10、编辑webpack配置文件：
10.1配置入口和输出文件：
module.exports={
entry:__dirname+"/src/scripts/app.js", //值可为对象，或者单个字符串组合
output:{
path:__dirname+"/build", //编译后的文件路径
filename:"/scripts/[name]-[hash].js" // 输出文件的路径
}
}
//执行webpack命令 输出了js文件
10.2 配置 html文件，需要以插件形式进行配置
1.安装html-webpack-plugin模块
（参考：https://www.npmjs.com/package/html-webpack-plugin ）
cnpm install html-webpack-plugin --save-dev
2.配置plugins
module.exports = {
entry: __dirname + "/src/scripts/app.js",
//值可为对象，或者单个字符串组合
output: {
path: __dirname + "/build",
//编译后的文件路径
filename: "/scripts/[name]-[hash].js" // 输出文件的路径
},
plugins: [ //配置插件
new HtmlWebpackPlugin({
filename: 'index.html',
//文件名
template: __dirname + '/src/index.html' //文件的相对路径
})
]
}
//执行webpack命令 输出了js文件
10.3资源处理 module 模块，css 处理后实际上会被打包到 js 里：
1.下载style-loader和css-loader模块
cnpm install style-loader --save-dev
cnpm install css-loader--save-dev
2.配置module
module: {
loaders: [ {
test: /\.css$/,
// 正则匹配所有以.css文件结尾的文件
loader: 'style-loader!css-loader'
}
]
}
//在小黑窗执行： webpack
11、webpack.config.js所有代码如下：
12、webpack模块优化：
备注：希望此模块对各位有所帮助
