1.安装mode.js、npm本地环境，lue
2.命令语言
mkdir webpack_demo //建立文件夹
cd webpack_demo //进入文件夹
npm install -g webpack //全局安装webpack
npm init //初始化
npm install --save-dev webpack //安装目录
3.建立项目基本结构
src文件夹 ----存放编写的源码
dist文件夹 ----存放webpack打包后的文件
dist下建立index.html文件，代码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>jspang webpack</title></head><body> ???<div id="title"></div> ???<script src="./bundle.js"></script></body></html>
src下建立entry.js文件，代码如下：
???document.getElementById(‘title‘).innerHTML=‘Hello Webpack‘;
4.配置文件
项目根目录下创建webpack.config.js文件，代码如下：
const path = require(‘path‘);module.exports={ ???//入口文件的配置项 ???entry:{ ???????//里面的entery是可以随便写的 ???????entry:‘./src/entry.js‘ ???}, ???//出口文件的配置项 ???output:{ ???????//打包的路径文职 ????????path:path.resolve(__dirname,‘dist‘), ???????//打包的文件名称 ???????filename:‘bundle.js‘ ???}, ???//模块：例如解读CSS,图片如何转换，压缩 ???module:{}, ???//插件，用于生产模版和各项功能 ???plugins:[], ???//配置webpack开发服务功能 ???devServer:{}}如果需要多入口，多出口文件我们只需要做如下修改：
const path = require(‘path‘);module.exports={ ???//入口文件的配置项 ???entry:{ ???????entry:‘./src/entry.js‘, ???????//这里我们又引入了一个入口文件 ???????entry2:‘./src/entry2.js‘ ???}, ???//出口文件的配置项 ???output:{ ???????//输出的路径，用了Node语法 ???????path:path.resolve(__dirname,‘dist‘), ???????//输出的文件名称 ???????filename:‘[name].js‘ ???}, ???//模块：例如解读CSS,图片如何转换，压缩 ???module:{}, ???//插件，用于生产模版和各项功能 ???plugins:[], ???//配置webpack开发服务功能 ???devServer:{}}在入口文件配置中，增加了一个entry2.js的入口文件（这个文件你需要自己手动建立），这时候要打包的就有了两个入口文件。在代码14行我们把原来的bundle.js修改成了[name].js
待续。。。
webpack基础第一篇（配置文件）
原文地址：http://www.cnblogs.com/xiaomingge/p/7986246.html