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

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

---

Vue+Webpack项目工程配置

Vue-loader+Webpack项目配置

1. 新建一个文件夹vue-todo。
2. 初始化项目
   npm init，之后一切默认即可。
3. 安装webpack和vue，npm i webpack vue vue-loader。
   • vue-loader是一个webpack的loader插件，可以将vue文件转换为JS模块。
   • 
     类似此类WARN的提示，说明vue-loader需要css-loader的第三方依赖，所以根据提示进行安装即可。
4. 新建src文件夹放置文件，并新建app.vue。
5. 新建index.js作为入口文件。
   
   

   index.js
6. 新建webpack.config.js，写入进出口配置。
   
   

   webpack.config.js
   
   注意__dirname是两个下划线__。
7. 修改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，会涉及到版本不一样。

8. 执行npm run build。

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

package.json

webpack.config.js

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

   webpack.config.js

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

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

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

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

    webpack.config.js
    
    
    webpack.config.js

Vue介绍和项目实战

CSS增加配置

postcss.config.js

.babelrc

1. 新增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单独分离打包

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

   webpack.config.js
   
   
   

   webpack.config.js
   
   
   

   webpack.config.js
   
   
   

   webpack.config.js

第三方库的单独打包

在正式环境下，第三方库单独打包的好处在于，这些第三方库的代码并不时常更新，而平时维护只需要更新业务代码，所以单独打包可以避免每次更新业务代码时也将第三方库更新，使用户加载流量更快。
使用webpack.optimize.CommonsChunkPlugin进行打包第三方库。

webpack.config.js

webpack.config.js