基础设置与安装。首先，创建一个新的目录并初始化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项目打包。如需更多帮助联系华纳云！