基础设置与安装。首先，创建一个新的目录并初始化npm，然后在本地安装webpack以及`webpack-cli`工具，用于在命令行中运行webpack：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

在`package.json`中配置脚本，以便运行webpack：

json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack" // 添加此行
}

创建bundle。调整目录结构，创建`./dist`文件夹用于存放分发代码，`./src`文件夹存放源代码。在`src`文件夹中创建入口文件`index.js`和`index.html`：

|- package.json
|- package-lock.json
+ |- /dist
+   |- index.html
- |- index.html
|- /src
  |- index.js

配置webpack。在项目根目录下创建`webpack.config.js`文件，配置入口、输出等基本设置：

javascript
var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

打包ES6/ES7语法。使用babel-loader处理ES6/ES7语法，安装相关依赖：

npm install babel-loader @babel/core @babel/preset-env --save-dev

在`webpack.config.js`中添加babel-loader配置：

javascript
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

运行与调试。启动开发服务器并打包项目：

npm run start // 启动开发服务器
npm run build // 打包项目

高级技巧:

- 使用Vue Router：安装并配置Vue Router，实现单页应用的路由管理。

- 使用Vuex：安装Vuex，实现全局状态管理。

以上步骤提供了使用Webpack 3进行项目打包的详细实战指南，从基础设置到高级配置，帮助你快速上手Webpack项目打包。如需更多帮助联系华纳云！