webpack学习与总结（三）-webpack使用vue的配置/plugin

概述

在我们开发中，通常会使用vuejs来进行开发，而且会以特殊的文件来组织vue的组件，在此总结一下webpack中配置vuejs

引入vuejs

我们希望在项目中使用vuejs,那么必须需要其有所依赖，所以需要先进行安装

npm install vue --save

安装成功后，我们就可以在项目中引入vuejs,使用vuejs.

在 index.html文件中，引入：

完成以上操作后，我们需要将项目重新打包，运行。打包过程没有出错，但是当我们运行时却发现没有结果。显示错误：

错误

这个错误说的是我们使用的是： runtime-only版本的vue，不同版本的vue使用方法不一样：

• runtime-only，代码中，不可以有任何的template
• runtime-compiler:代码中，因为有compiler可以用于编译template

解决方法

我们需要修改webpack的配置，添加下列内容即可;

el 与template的区别

有时候，我们需要将data中的数据显示在界面中，就必须需要修改index.html，如果我们后面自定义了组件，也必须修改Index.html来使用组件.但是我们往往不希望手动的来频繁的修改，这时候我们就需要使用template

定义template属性

• 在vue实例中，我们定义了了el属性，用于和Index.html中的#app进行绑定，让vue实例之后可以管理它其中的内容
• 我们可以将div元素中的{{Message}}内容删掉，只保留一个基本的id为div的元素
• 但是我们依然希望在其中显示{{message}}的内容，实现方法：
  

如果项目中同时存在template和el，template会替换el中的内容。

.vue文件的封装

• 安装vue-loader 和vue-template-compiler

>npm install --save-dev vue-loader vue-template-compiler

• 修改webpack.config.js的配置文件
• { test: /\.vue$/, use: ['vue-loader'] }

如果出现版本不兼容的情况

• 处理方法：修改版本号i，然后执行命令：npm install

plugin

• plugin是插件的意思，通常用于对某个现有架构进行扩展
• webpack中的插件，就是对webpack现有功能进行各种扩展，比如打包优化，文件压缩等
• loader和plugin的区别
  • loader主要用于转换某些类型的模块，他是一个转换器
  • plugin是插件，它是对webpack本身的扩展，是一个扩展器
• plugin使用过程
• 1.通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）
• 2.在webpack.config.js中的plugins中配置插件

添加版权的plugin

该插件名称为：BannerPlugin，属于webpack自带的插件
按照下面的方法来修改webpack.config.js的文件：

• 重新打包程序：查看bundle.js的头部，看到如下信息：
  

HtmlWebpackPlugin

• 我们创建的index.html文件是存放到项目的根目录下的。
• 但是我们知道，在真实发布项目时，发布的是dist文件夹的内容，但是dist文件夹中如果没有index.html,那么打包的Js等文件也就没有意义了。所以我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用htmlWebpackPlugin插件
• 引入插件可以为我们做的这些事情
  • 自动打包生成一个Index.html(可以指定模板来生成)
  • 将打包的js文件，自动通过script标签插入得到body中
• 安装htmlWebpackPlugin插件npm install html-webpack-plugin --save-dev
• 使用插件，修改webpack.config.js文件中的plugins部分的内容如下：
• template表示根据什么模板来生成index.html
• 另外，我们需要删除之前在output中添加的publicPath属性
• 否则插入的script标签中的src可能会有问题
  

 plugins:[
      new webpack.BannerPlugin('最终版权归aaa所有'),
      new HtmlWebpackPlugin({
        template: 'index.html'
      })
  ]

UglifyisWebpackPlugin

• 在一个项目发布之前，我们需要对打包的JS文件进行压缩
• 我使用一个第三方的插件uglifyis-Webpack-Plugin,并且制定版本号为1.1.1，与CLI2保持一致npm install uglifyjs-webpack-pligin@1.1.1 --save-dev
• 修改webpack.config.js文件，使用插件：
• 查看打包过得bundle.js文件，已经被压缩过了
  

总结

在学习webpack配置的过程中，配置较为复杂，有时候会因为各种版本之间的兼容性问题而出现各种错误，但好在自己克服了。虽然后面会使用脚手架来进行开发，但是个人觉得，深入学习了解webpack的配置确实更容易让自己将知识掌握得牢固。