因为浏览器识别不了es6的一些语法，所以我们写的代码需要处理成浏览器识别的语言，至于转换的这个工作就交给webpack来做了。
git:git@github.com:ghrGit/webpack001.git
1.先简单写几个待打包的文件
目录结构：
a.js
export default function a(){ ?console.log(‘module a‘);}b.js
export default function b(){ ?console.log(‘module b‘);}app.js 为入口文件
import a from ‘./a‘;import b from ‘,/b‘;a();b();
2.在demo1下运行npm init -y 生成一个默认的package.json 文件 并配置运行脚本
"dev":"webpack" ?运行webpack，默认运行webpack.config.js文件
{ ?"name": "demo1", ?"version": "1.0.0", ?"description": "", ?"main": "index.js", ?"scripts": { ???"test": "echo \"Error: no test specified\" && exit 1", ???"dev":"webpack" ????}, ?"keywords": [], ?"author": "", ?"license": "ISC", ?"devDependencies": { ???"webpack": "^3.8.1" ?}}3.在demo1下运行npm i -D webpack 安装项目开发(-D)的依赖 webpack ， 会增加一个node_modules文件夹
4.新建一个dist文件夹，用于放置打包后的文件
5. 在demo1下 新建一个文件webpack.config.js (复制的话请把注释去掉)
const path = require(‘path‘);module.exports={ ?entry:‘./src/app.js‘,//打包入口 ?output:{ ?????path:path.resolve(__dirname,‘dist‘),// ?打包后文件的放置的绝对路径 ???filename:‘main.js‘ ?//打包生成文件的文件名 ?}}6.在demo1下运行npm run dev 这个时候应该你打包后的文件main.js已经在dist文件夹下面了。
7.在dist新建一个index.html 文件，引入main.js
<!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>Document</title></head><body> ?</body><script src=‘./main.js‘></script></html>
8.运行index.html 看console如图
最简单的webpack打包
原文地址：http://www.cnblogs.com/guohuiru/p/webpack.html