对于刚刚接触编程的人来说，最难的可能并不是学习一种新语法或者框架，而是编程思维，这种思维在调试的时候显得尤为重要，拥有良好的编程习惯和思维能力可以大幅度提高调试效率。而编程思维的培养往往需要经验的积累，只有把底层原理一遍遍地思考之后，才会有更深入的理解，这也是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内置模块path module.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里面的内容不遍历 } ] } }
我测试的时候出现了这样的错误，如果有相同情况的可以参考下：
Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
这是因为版本之间的不兼容，按照上面的要求，你可以安装低版本的babel-loader@7
也有可能webpack会发出这样的警告：
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
你需要给脚本配置一个环境，一般build我们会用生产环境webpack --mode production，而dev会使用生产环境webpack --mode development （这个下面会讲）
另外，有时候我们可能会遇到不能识别webpack命令，原因未知，不过重新安装一次就可以了...
接下来需要让babel-loader翻译官具有翻译的功能：
npm install babel-preset-es2015 --save-dev
并且新建一个.babelrc的文件，里面新建
{ "presets":["es2015"] }
如果需要转译ES7语法，你还需要安装
npm install babel-preset-stage-0 --save-dev
同样在.babelrc添加
{ "presets":["es2015"."stage-0"] }
每次修改配置之后都要重新编译：npm run build
4. 解析样式
上面我们实现了vue引入和es6以及es7语法转译，现在我们来解析样式，需要安装两个包
npm install css-loader style-loader --save-dev
css-loader将css解析成模块，style-loader将解析的内容插入到style标签内
别忘了在配置里webpack.config.json添加规则
rules:[{test:/\.css$/,use:['style-loader','css-loader']}]
但是大多数时候，我们在vue中会使用样式预处理语言，比如sass、less、stylus，同样地我们需要安装对应的包，添加对应的规则
npm install less less-loader --save-dev rules:[ {test:/\.less$/,use:['style-loader','css-loader','less-loader']}]
5. 解析图片
图片是大多数项目不可获取的部分，怎样解析图片呢？和解析样式步骤差不多，我们需要先安装包再添加规则
npm install file-loader url-loader --save-dev
rules:[ {test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'}, {test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'} ]
limit表示转化base64只在8192字节一下转化，其他情况输出图片
6. 解析html
我们希望build之后能有一个html文件，能直接看到编译之后的效果
这时就需要一个插件，插件的作用是以我们自己的html为模板将打包后的结果，自动引入到html中产出到dist目录下
npm install html-webpack-plugin --save-dev
在webpack.config.js引入这个插件