废话不多说，直接走实战！！！
1、桌面新建一个文件夹：webpack_test
2、在webpack_test文件夹下面新建一个文件夹demo01
3、然后又在demo01文件夹下面建立两个js文件main.js和index.js文件
4、在index.js中写一个函数并导出
//声明一个函数并用export导出export function add(a, b) { ???console.log (a + b);}5、在main.js中导入index.js中的函数，并调用
import {add} from ‘./index.js‘add(3, 5);add(78, 100);6、再在根目录webpack_test下创建一个文件index.html
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>我学习webpack</title></head><body></body></html>
7、然后在根目录webpack_test下新建一个webpack.config.js的文件，并写配置规则
const path = require(‘path‘)const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)config = { ???entry: { ???????????main:‘./demo01/main.js‘ ???}, ???output: { ???????path: path.resolve(__dirname, ‘dist‘) ??//指定出口文件的路径 ???????filename: ‘[name].js‘ ??//这是一个上面背景颜色一样的 Chunk name，也可以指定出口路径如规定 ‘./[name].js‘出口就会在js这个文件夹下 ???}, ???module: { ???????rules: [ ???????????{ ???????????????test: /\.js$/, ???????????????exclude: /node_modules/, ???????????????loader: ‘babel-loader‘ ???????????} ???????] ???}, ???plugins: [ ???????new HtmlWebpackPlugin({ ????????????filename: ‘index_webpack.html‘, ????????????template: ‘index.html‘ ???????}) ???]}module.exports = config8、在终端安装各种包
npm init 初始化一下
cnpm install webpack --save-dev 下载webpack模块
cnpm install babel-loader 这个包允许使用 Babel 和 Webpack 转换JavaScript文件
cnpm install babel-core 解释js的文件
html-webpack-plugin 下载所需要的插件
9、然后使用webpack编译一下即可,打开的时候去dis目录下打开index_webpack.html
webpack ----- 第一章
原文地址：http://www.cnblogs.com/tenro/p/7745113.html