新建文件如下结构：
webpack-demo |- package.json |- webpack.config.js |- /dist |- index.html |- /src |- index.js
index.html如下：
Getting Started
1.安装webpack
npm install --save-dev webpacknpm install --save-dev webpack@// @ 表示指定版本安装 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