新建文件如下结构：
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
index.html如下：
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
1.安装webpack
npm install --save-dev webpack
npm install --save-dev webpack@<version> // @<version> 表示指定版本安装
npm install --global webpack // --global 表示全局安装
2.配置文件 webpack.config.js
let webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js', // 需要被打包的文件
output: { // 打包后的输出文件
filename: 'bundle.js', // 打包后输出文件的名字
path: path.resolve(__dirname, 'dist') // 打包后输出文件的路径
}
};
3.创建bundle
命令行输入 npm install --save lodash
在index.js文件如下：
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
4.NPM Scripts
{
...
"scripts": {
"build": "webpack"
},
...
}
在命令行输入 npm run build 即可开始打包。
打包结束后打开index.html观察现象
最后，完整的文件结构如下：
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules