webpack.config.js内容还是比较好理解的，它采用了CommonJS的写法，entry节点配置了编译入口，output节点配置了输出。
这段entry和output配置的含义是：编译src/main.js文件，然后输出到dist/build.js文件。

3. 安装项目依赖

执行以下命令安装项目依赖：cd my-webpack-simple-demo npm install

安装完成后，目录下会产生一个node_modules文件夹。

项目相关的依赖都存放在这个文件夹下了，比vue-browserify-simple项目模板的依赖要多得多。

4. 运行示例

执行以下命令运行示例：npm run dev

打开127.0.0.1:8080，可以看到以下画面：

注意：和browserify不同的是，执行npm run dev命令后并不会在dist目录下生成build.js文件，开发环境下build.js是在运行内存中的。

5. 发布

执行以下命令会生成发布时的build.js，并且是经过压缩的。

npm run build

使用vue-webpack模板

重新打开一个git bash窗口，执行以下命令：vue init webpack my-webpack-demo

webpack是项目模板，my-webpack-demo是项目名称。

目录下生成了一个文件夹my-webpack-demo：

文件目录结构如下（参考：https://vuejs-templates.github.io/webpack/structure.html）

├── build/ # webpack config files │ └── ... ├── config/ │ ├── index.js # main project config │ └── ... ├── src/ │ ├── main.js # app entry file │ ├── App.vue # main app component │ ├── components/ # ui components │ │ └── ... │ └── assets/ # module assets (processed by webpack) │ └── ... ├── static/ # pure static assets (directly copied) ├── test/ │ └── unit/ # unit tests │ │ ├── specs/ # test spec files │ │ ├── index.js # test build entry file │ │ └── karma.conf.js # test runner config file │ └── e2e/ # e2e tests │ │ ├── specs/ # test spec files │ │ ├── custom-assertions/ # custom assertions for e2e tests │ │ ├── runner.js # test runner script │ │ └── nightwatch.conf.js # test runner config file ├── .babelrc # babel config ├── .editorconfig.js # editor config ├── .eslintrc.js # eslint config ├── index.html # index.html template └── package.json # build scripts and dependencies 2. 安装依赖

执行以下两行命令，安装项目依赖：cd my-webpack-demo npm install

（安装过程较为缓慢，需要耐心等待…）

3. 运行示例

执行以下命令运行示例：npm run dev

打开127.0.0.1:8080，可以看到以下画面：

4. 发布

执行以下命令生成发布：

npm run build

和vue-simple-webpack模板不同的是，所有的静态资源，包括index.html都生成到dist目录下了。

这意味着你可以直接拿着dist目录去发布应用，例如在IIS下将dist目录发布为一个网站。

vue-simple-webpack示例

昨天我们使用了vue-simple-browserify模板做了一个小示例，今天我们就用vue-simple-webpack模板完成同样的示例。

该示例的代码我就不贴出来了，大家可以到本文开头的GitHub地址去下载。

View Demo

总结