使用webpack搭建vue项目实现脚手架功能

本文基于node.js开发环境，安装完node之后新建项目，通过webpack配置，实现vue-cli脚手架功能

对于刚刚接触编程的人来说，最难的可能并不是学习一种新语法或者框架，而是编程思维，这种思维在调试的时候显得尤为重要，拥有良好的编程习惯和思维能力可以大幅度提高调试效率。而编程思维的培养往往需要经验的积累，只有把底层原理一遍遍地思考之后，才会有更深入的理解，这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一。

所以今天特意一步步通过webpack配置，实现与vue-cli相同的效果，希望大家能有所收获。

1. 创建一个vue项目

使用命令行mkdir vuedeom 或者直接新建一个vuedemo空文件夹，然后命令行cd vuedemo，使用npm init -y初始化，此时你会看到文件夹多了一个package.json的文件，内容大致如下：

{ "name": "vuedemo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo /"Error: no test specified/" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}

2. 引入webpack

通过npm加载webpack，当然如果速度慢的话你也可以使用淘宝镜像，npm install -g cnpm –registry=https://registry.npm.taobao.org，然后输入命令：cnpm install webpack --save-dev

接下来我们在项目根目录创建一个src文件，有一个main.js，再创建一个webpack.config.js，最后修改package.json的脚本：

const path = require('path') //引入node内置模块pathmodule.exports ={ entry:'./src/main.js',  // 入口文件，把src下的main.js编译到出口文件 output:{     //出口文件  path:path.resolve(__dirname,'dist'), //出口路径和目录  filename:"demo.js"      //编译后的名称 }}

//package.json{ "name": "vuedemo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build":"webpack" //当使用npm run build的时候就会执行webpack，按照提示安装webpack-cli }, "keywords": [], "author": "", "license": "ISC"}

3. babel编译

虽然ES6语法已经广泛普及，但各个浏览器还不是特别兼容，为了避免出错我们需要把ES6转成ES5，使用babel进行编译

npm install --save-dev babel-core babel-loader

加载完成之后，在webpack.config.js配置

const path = require('path')module.exports ={ entry:'./src/main.js', output:{  path:path.resolve(__dirname,'dist'),  filename:"demo.js" }, module:{  rules:[ //遍历规则   {    test: //.js$/, //匹配以js结尾的文件    loader:"babel-loader", // 使用babel-loader编译    exclude: /node_modules/ //node_module里面的内容不遍历   }  ] }}

我测试的时候出现了这样的错误，如果有相同情况的可以参考下：