webpack 构建 vue simple demo

项目可以在https://gitee.com/rightway/reaserch   下载下来查看。

webpack 使用说明参考官网文档：https://www.webpackjs.com/concepts/

该网址作为配置 webpack.config.js 文档提供官方说明。

由于要使用vue 来创建工程，webpack配置的时候，需要使用vue-loader 来作为对.vue 文件的解析。 

使用webpack 安装vue-loader 的vue 官方网站 请移步：https://vue-loader.vuejs.org/zh/guide/#vue-cli   查看webpack 下对vue-loader 的配置

由于需要用到babel-loader  请移步：https://www.webpackjs.com/loaders/babel-loader/  查看该安装。

 

 

如果从0 构建工程的话。

确保电脑系统已正确安装node.js npm 的registery修改为国内的 安装好正确的webpack  webpack-cli

webpack -v  命令查看到正确的版本。

该工程使用atom 编辑器对文档编辑。

windows 系统下。

1. npm init -y 在命令目录下创建package.json 文件。//文档说明请看node  官网中对package.json的介绍。

2，安装依赖;   npm install --save-dev vue-loader vue-template-compiler 

如果提示需要安装css-loader 继续安装css-loader

3,npm install babel-loader babel-core babel-preset-env 

plus: webpack官方文档中有说明了对文档解析速度方面的说明，故安装了pm install babel-plugin-transform-runtime --save-dev   npm install babel-runtime --save

本工程安装后，在webpack 时候，出现了错误提示。移步网址：https://www.npmjs.com/package/babel-plugin-transform-vue-jsx 安装正确的即可。

4,创建webpack.config.js 文件。文件的配置如上网址都提供了各部分配置说明。自行查看配置。

5，创建test1.vue. test.js 文件，创建了/dist/test.html 网页。

6：npm install --save-dev clean-webpack-plugin   移步：https://www.webpackjs.com/guides/output-management/#%E6%B8%85%E7%90%86-dist-%E6%96%87%E4%BB%B6%E5%A4%B9  查看说明

 

涉及知识。 vue  webpack node.js  。

该文档创建的背景是，后端做好后，在创建前端网页的时候，需要使用vue，用到了css, js, 网页中对这些资源的引用让我觉得挺烦的。接触到模块化前端编程。故大致学习了下。

如果有新人对此感兴趣。请切记，看完vue官网指南文档，以及webpack 文档后，再尝试构建这类工程。