Vue学习篇(十二)—webpack使用(二)

最新推荐文章于 2024-04-22 09:35:58 发布

云澈丿

最新推荐文章于 2024-04-22 09:35:58 发布

阅读量162

点赞数 1

分类专栏：前端前端框架文章标签： javascript css vue.js html

本文链接：https://blog.csdn.net/weixin_45333934/article/details/107483796

版权

前端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

前端框架

23 篇文章 1 订阅

订阅专栏

Vue Day 12——webpack使用

概述

webpack中配置Vue
plugin的使用
搭建本地服务器

12.6. webpack中配置Vue

引入vue.js

后续项目中，我们会使用Vuejs进行开发，而且会以特殊的文件来组织vue的组件。

所以，下面我们来学习一下如何在我们的webpack环境中集成Vuejs

现在，我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装

注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖

npm install vue --save

那么，接下来就可以按照我们之前学习的方式来使用Vue了

import Vue from 'vue'
new Vue({
  el: '#app',
  //当vue对象中既有el,又有template时，template会把原有的el对应的div，给替换掉
  template: `<App/>`,
  components: {
    App
  }
})

打包项目 – 错误信息

修改完成后，重新打包，运行程序：

打包过程没有任何错误(因为只是多打包了一个vue的js文件而已)
但是运行程序，没有出现想要的效果，而且浏览器中有报错

这个错误说的是我们使用的是runtime-only版本的Vue，什么意思呢？

这里我只说解决方案：Vue不同版本构建，后续我具体讲解runtime-only和runtime-compiler的区别。

所以我们修改webpack的配置，添加如下内容即可plate区别（一）

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}

el和template区别（一）

正常运行之后，我们来考虑另外一个问题：

如果我们希望将data中的数据显示在界面中，就必须是修改index.html
如果我们后面自定义了组件，也必须修改index.html来使用组件
但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？

定义template属性：

在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容
这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素
但是如果我依然希望在其中显示{{message}}的内容，应该怎么处理呢？
我们可以再定义一个template属性，代码如下：

new Vue({
  el: '#app',
  template: `<div id="app">{{message}}</div>`,
  data: {
      message: '云澈'
  }
})

el和template区别（二）

重新打包，运行程序，显示一样的结果和HTML代码结构
那么，el和template模板的关系是什么呢

在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

这样做有什么好处呢？

这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可

但是，书写template模块非常麻烦怎么办呢？

没有关系，稍后我们会将template模板中的内容进行抽离。
会分成三部分书写：template、script、style，结构变得非常清晰。（代码后面给出）

Vue组件化开发引入

在学习组件化开发的时候，我说过以后的Vue开发过程中，我们都会采用组件化开发的思想。

那么，在当前项目中，如果我也想采用组件化的形式进行开发，应该怎么做呢？
当然，我们也可以将代码抽取到一个js文件中，并且导出。

.vue文件封装处理

但是一个组件以一个js对象的形式进行组织和使用的时候是非常不方便的

一方面编写template模块非常的麻烦
另外一方面如果有样式的话，我们写在哪里比较合适呢？

现在，我们以一种全新的方式来组织一个vue的组件

//app.vue
<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnclick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>

<script>
  import Cpn from './Cpn.vue'
  export default {
    name: "app",
    data: {
      message: 'Hello Vue',
      name: 'ssss'
    },
    methods: {
      btnclick() {
        console.log('sssa')
      }
    }
  }
</script>

<style scoped>
  .title {
    color: aqua;
  }
</style>

但是，这个时候这个文件可以被正确的加载吗？

必然不可以，这种特殊的文件以及特殊的格式，必须有人帮助我们处理。
谁来处理呢？vue-loader以及vue-template-compiler。

安装vue-loader和vue-template-compiler

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

修改webpack.config.js的配置文件：

{
  test: /\.vue$/,
  use: ['vue-loader']
}

总体测试代码

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
  </div>

<script src="./dist/bundle.js"></script>
</body>
</html>

//main.js

//5、使用Vue进行开发
//runtime-only->代码中，不可以有任何的template
//runtime-comiler->代码中，因为有compiler可以用于编译的template
import Vue from 'vue'
// import App from './vue/app'
import App from './vue/app'
new Vue({
  el: '#app',
  //当vue对象中既有el,又有template时，template会把原有的el对应的div，给替换掉
  template: `<App/>`,
  components: {
    App
  }
})

//app.js
export default {
  template: `
  <div>
    <h2>{{message}}</h2>
    <button @click="btnclick">按钮</button>
    <h2>{{name}}</h2>
  </div>
  `,
  data: {
    message: 'Hello Vue',
    name: 'ssss'
  },
  methods: {
    btnclick() {
      console.log('sssa')
    }
  }
}

//Cpn.vue
<template>
  <div>
    <h2>这里是Cpn的子组件</h2>
  </div>
</template>

<script>
  export default {
    name: "Cpn"
  }
</script>

<style scoped>

</style>

//app.vue

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnclick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>

<script>
  import Cpn from './Cpn.vue'
  export default {
    name: "app",
    data: {
      message: 'Hello Vue',
      name: 'ssss'
    },
    methods: {
      btnclick() {
        console.log('sssa')
      }
    }
  }
</script>

<style scoped>
  .title {
    color: aqua;
  }
</style>

12.7. plugin的使用

plugin是什么？

plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader和plugin区别

loader主要用于转换某些类型的模块，它是一个转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程：

步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。

下面，我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让我们的webpack变得更加好用。

添加版权的Plugin

该插件名字叫BannerPlugin，属于webpack自带的插件。

按照下面的方式来修改webpack.config.js的文件：

//利用配置文件设定webpack的目标文件和出口文件
const path = require('path');
const webpack = require('webpack');
module.exports = {
.........
  plugin: [
    new webpack.BannerPlugin('最终版权所有'),
  ],

}

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

/*!最终版权归云澈所有*/

打包html的plugin

目前，我们的index.html文件是存放在项目的根目录下的。

我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用

HtmlWebpackPlugin插件

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可能会有问题

plugin: [
  new webpack.BannerPlugin('最终版权所有'),
  new HtmlWebpaackPlugin({
    template: 'index.html'
  })
],

js压缩的Plugin

在项目发布之前，我们必然需要对js等文件进行压缩处理

这里，我们就对打包的js文件进行压缩
我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.config.js文件，使用插件：

//利用配置文件设定webpack的目标文件和出口文件
const path = require('path');
const webpack = require('webpack');
const HtmlWebpaackPlugin = require('html-webpack-plugin')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

....

  plugin: [
    new webpack.BannerPlugin('最终版权所有'),
    new uglifyJsPlugin()

查看打包后的bunlde.js文件，是已经被压缩过了。

12.8. 搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
不过它是一个单独的模块，在webpack中使用之前需要先安装它

npm install --save-dev webpack-dev-server@2.9.1

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port：端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式

webpack.config.js文件配置修改如下：

devServer: {
  contentBase: './dist',
  inline: true
}

我们可以再配置另外一个scripts：

–open参数表示直接打开浏览器

"dev": "webpack-dev-server --open"

云澈丿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习篇(十二)—webpack使用(二)

后续项目中，我们会使用Vuejs进行开发，而且会以特殊的文件来组织vue的组件。所以，下面我们来学习一下如何在我们的webpack环境中集成Vuejs
复制链接

扫一扫

专栏目录