Vue+Webpack打造TODO应用（备注版）

2018-08-09 本文已影响0人 SA_Arthur

最近跟着慕课网学习入门Webpack，该文章基本参考Vue+Webpack打造todo应用该课程，仅在代码上添加了部分注释。
感谢Jokcy老师。

Vue+Webpack项目工程配置

Vue-loader+Webpack项目配置

新建一个文件夹vue-todo。
初始化项目
npm init，之后一切默认即可。
安装webpack和vue，npm i webpack vue vue-loader。
- vue-loader是一个webpack的loader插件，可以将vue文件转换为JS模块。
- 类似此类WARN的提示，说明vue-loader需要css-loader的第三方依赖，所以根据提示进行安装即可。
新建src文件夹放置文件，并新建app.vue。
新建index.js作为入口文件。
index.js
新建webpack.config.js，写入进出口配置。
webpack.config.js
注意__dirname是两个下划线__。
修改webpack打包执行命令，使用webpack.config.js配置文件。
package.json

webpack执行命令参数
- webpack --config XXX.js // 使用另一份配置文件（比如webpack.config2.js）来打包
- webpack --watch //监听变动并自动打包
- webpack -p //压缩混淆脚本
- webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了其中的
- webpack --progress //显示进度条
- webpack --color //添加颜色
- 在bulid中使用webpack命令，才会使用文档中的webpack，如果是在命令行使用，就会使用全局的webpack，会涉及到版本不一样。

执行npm run build。

因为课程比较早，所以需要注意webpack的版本问题，如果没有指定版本，那么webpack会是4.x版本，需要自己降到3.x版本。
并且vue-loader如果是15.X，需使用插件VueLoaderPlugin，需要在webpack.config.js中引入。
此时配置为：

package.json

webpack.config.js

继续写webpack.config.js配置。
webpack.config.js

url-loader基立于file-loader，所以需要安装。

安装stylus相关。
使用webpack-dev-server，并在webpack.config.js配置检测环境变量。

安装cross-env解决跨平台设置NODE_EVNV（因为windows不支持NODE_ENV=development的设置方式）

具体配置webpack.config.js，增加使用模块和环境配置。
webpack.config.js
webpack.config.js
webpack.config.js

Vue介绍和项目实战

CSS增加配置

postcss.config.js

.babelrc

新增postcss.config.js和.babelrc文件，并安装postcss-loader autoprefixer babel-loader balbel-core，增加CSS配置插件。
.bebelrc入门配置参考https://www.jb51.net/article/135225.htm

需要注意webpack-dev-server版本不要高于webpack-cli版本，否则运行时会报错。
sourcemap是什么
随着代码增多，我们需要对代码进行压缩。代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试。

页面编写

此步略过，可查看视频底下同学的整理。

webpack配置优化

CSS单独分离打包

安装extract-text-webpack-plugin插件，该插件的主要是为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象。
webpack.config.js
webpack.config.js
webpack.config.js
webpack.config.js