vue-webpack

Webpack

webpack提供了两种项目模板，分别是vue-webpack-simple模板和vue-webpack模板

Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

1. 支持CommonJs和AMD模块，意思也就是我们基本可以无痛迁移旧项目。
2. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持。
3. 可以通过配置或智能分析打包成多个文件，实现公共模块或按需加载。
4. 将样式文件和图片等静态资源也可视为模块进行打包。配合loader加载器，可以支持sass，less等CSS预处理器。
5. 内置有source map，即使打包在一起依旧方便调试。

环境准备

Node.js和Git是必备的工具，NPM的版本最好是3.x版本以上，NPM 3.x提供了更有效的包依赖管理。

在使用这两种项目模板前，需要先安装vue cli，执行以下命令安装vue cli npm install -g vue-cli==》就可以基于vue-webpack-simple模板和vue-webpack模板创建项目了。

模式一：使用vue-webpack-simple模板

1.生成项目在某个目录下右键运行Git Bash Here，比如我的目录是D:VueOfficialTemplates。====>在git bash下输入以下命令：

vue init webpack-simple my-webpack-simple-demo(webpack-simple是项目模板的名称，my-webpack-simple-demo是你要生成的项目名称。

)===>目录下生成了一个文件夹my-webpack-simple-demo。===>2. 项目结构说明===>3. 安装项目依赖

cd my-webpack-simple-demo  npm install(比vue-browserify-simple项目模板的依赖要多得多。)==>4. 运行示例npm run dev==>打开127.0.0.1:8080

 

 

打开my-webpack-simple-demo文件夹，看到以下目录结构：

 

开发时依赖babel、各种loader和webpack，

发布时依赖vue和babel-runtime。
scripts节点同样定义了开发时和发布时的编译命令，和browserify不同的是，编译的输入和输出是定义在webpack.config.js文件中的。

webpack.config.js内容还是比较好理解的，它采用了CommonJS的写法，entry节点配置了编译入口，output节点配置了输出。

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

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

方式2：使用vue-webpack模板

重新打开一个git bash窗口，执行以下命令：vue init webpack my-webpack-demo==》（目录下生成了一个文件夹my-webpack-demo：）==》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发布）

browserify和webpack都是打包和模块依赖管理工具，webpack拥有比browserify更强的功能，使用哪种工具取决于你们个人的偏好、项目的要求。
毋庸置疑的是，Vue.js官方基于vue cli, browserify, webpack构筑的几个项目模板，确实能够给我们带来很大的便利，可以让我们快速地投入到开发中。