Vue2工程模板：webpack2打包与iView集成配置详解

本文档主要介绍了如何构建一个基于Vue.js 2、Vue-Router以及webpack 2的Vue工程模板，并提供了GitHub仓库链接，以便开发者可以直接获取和学习。在该模板中，webpack被用来进行打包和模块管理，确保项目结构清晰，性能优化。 首先，我们关注的是项目的基础配置，这主要体现在`webpack.base.config.js`文件中。该配置文件包含了以下关键部分： 1. 引入必要的模块：`path`用于处理路径，`webpack`本身是模块加载器，`ExtractTextPlugin`用于将CSS提取到单独的文件中，以提高性能。 2. 配置入口文件：`entry`对象定义了项目的主入口和公共模块的入口，分别是`./src/main`和`./src/vendors`，这有助于按需加载和分离第三方库。 3. 输出目录设置：`output.path`指定输出文件的根目录，这里设置为项目根目录下的`./dist`。 4. 模块规则： - `.vue`文件的处理：通过`vue-loader`处理Vue单文件组件，`ExtractTextPlugin`使得less样式文件可以被独立提取并压缩。 - `iview/.*?js`文件：针对iview库的JavaScript文件，使用`babel-loader`进行编译。 - `.js`文件：一般的JavaScript文件同样使用`babel-loader`，并排除`node_modules`目录，避免不必要的编译。 - `.css`文件：对CSS文件进行处理，同样使用`ExtractTextPlugin`提取和处理。 通过这个基础配置，开发人员可以快速上手Vue项目，同时利用webpack的模块打包和优化功能，确保项目代码的可维护性和性能。在实际项目开发过程中，可能还需要根据具体需求对配置进行定制，如添加热加载、懒加载等功能。GitHub仓库（<https://github.com/MengFangui/VueProjectTemplate>）提供了完整的模板源码和详细的README文档，帮助新手快速理解并应用这些配置。