AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

webpack学习三：webpack初始化整合配置vue，一步一步的抽离代码块整合vue。

2024-10-17 83
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章是关于如何在webpack环境中配置Vue.js，包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案，以及整个过程的总结。

前言

  1. webpack学习一：什么是模块化开发，什么是webpack，以及二者之间的关系。
  2. webpack学习二：webpack初始用打包，webpack初始用配置文件打包，webpack安装对应的loader
  3. webpack学习三：webpack初始化整合配置vue，一步一步的抽离代码块整合vue。
  4. webpack学习四：使用webpack配置plugin，来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
  5. webpack学习五：webpack的配置文件webpack.config.js分离，分离成开发环境和生产环境

一、项目完成的目录

这里是使用上一个博客的案例，继续整合vue。慢慢搭建一个正常开发的框架。
从main1.js 着步演练到 main2.js，再到 main3.js，再到 main4.js，最后是完美版的 main.js。
在这里插入图片描述

二、webpack配置vue

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

1. main1.js，安装vue并初始用（解决报错）

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

  • 注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖
    安装命令
    npm install vue --save

  • 那么，接下来就可以按照我们之前学习的方式来使用Vue了
    在入口文件main1.js中引入，打包时，还是使用main.js打包
    在这里插入图片描述
    在这里插入图片描述

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

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

在这里插入图片描述

  • 这个错误说的是我们使用的是runtime-only版本的Vue，什么意思呢？
    解决方案：Vue不同版本构建。

vue有两个模式先：runtime-only和runtime-compiler
先了解这两个模式：
runtime-only -> 代码中，不可以有任何的template，
runtime-compiler -> 代码中，可以有template ，因为游compiler 可以用于编译 template

  • 所以我们修改webpack的配置，添加如下内容即可
    所以 需要在 webpack.config.js 配置文件中 指定 vue 的路径。
    也就是在 main1.js 中 导入（import） vue 时，去 webpack.config.js 配置文件中，看是否有指向的某个文件夹
    在这里插入图片描述```
    resolve: { 

    // import 文件时，可以不写后缀，在这里配置，但是我这里不写配置不写后缀也可以成功。
extensions: ['.js', '.css', '.vue'],
// alias： 别名， $：以vue为结尾的
alias: {
  'vue$': 'vue/dist/vue.esm.js'
}

    }

    ```

resolve 与 entry、output、module 同级

然后打包npm run build，显示成功。打开浏览器显示成功。
在这里插入图片描述

2. el和template区别

a、区别一

  • 正常运行之后，我们来考虑另外一个问题：
  1. 如果我们希望将data中的数据显示在界面中，就必须是修改index.html
  2. 如果我们后面自定义了组件，也必须修改index.html来使用组件
  3. 但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？则可以使用下面的定义template属性
  • 定义template属性：
  1. 在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容
  2. 这里，我们可以将div元素中的{ {message}}内容删掉，只保留一个基本的id为div的元素
  3. 但是如果我依然希望在其中显示{ {message}}的内容，应该怎么处理呢？

  4. 我们可以再定义一个template属性，代码如下：`` const app = new Vue({ el: '#app', // 这里 替换了 index.html 中的 div template:

    <div>
  <span>{
    {message}}</span>
  <button>按钮</button>
  <span>{
    {name}}</span>
</div>

    `,
    data: { 

    message: '冯凡利 i love you',
name: '冯安晨'

    }
    })

    ```

  • 重新打包，运行程序，显示一样的结果和HTML代码结构
  • 那么，el和template模板的关系是什么呢？
  1. 在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
  2. 而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。
  • 这样做有什么好处呢？
    这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可
  • 但是，书写template模块非常麻烦怎么办呢？
  1. 没有关系，稍后 我们会将template模板中的内容进行抽离。
  2. 会分成三部分书写：template、script、style，结构变得非常清晰。

3. main2.js，使用SPA模式

  1. SPA 是 simple page web application ,一个单页面应用
  2. 也就是只有一个 index.html 页面，并且内容不写在这里面。
  3. 也就是上面标题二中的，不在index.html里编写渲染vue的语法，而在main2.js中使用template语法，进行渲染。
  4. 这样一来， index.html 一直不变，内容的渲染都在template模板语法中。
  • main2.js
// 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')

console.log(add(20, 30));
console.log(mul(20, 30));

// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";

console.log(name);
console.log(age);
console.log(height);

// 3. 引入静态资源 css 文件
require('./css/normal.css')

// 4. 引入静态资源 less 文件
require('./css/special.less')
document.writeln('<h2>你好啊 冯凡利</h2>')

// 5. 引入vue进行开发
import Vue from 'vue'

// 相比于 main2.js ，这里把 内容放到了 template 中

const app = new Vue({
  el: '#app',
  // 这里 替换了 index.html 中的 div
  template: `
    <div>
      <span>{
  {message}}</span>
      <button>按钮</button>
      <span>{
  {name}}</span>
    </div>
  `,
  data: {
    message: '冯凡利 i love you',
    name: '冯安晨'
  }
})
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-webpack配置vue</title>
</head>
<body>
<div id="app">
<!--  <h2>{
  {message}}</h2>-->
</div>

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

然后打包npm run build，显示成功。打开浏览器显示成功。
在这里插入图片描述

4. main3.js,抽取模板出来为一个对象

通过模板的语法，可以将template模板提取出来，为一个对象。如下所示：

main3.js

// 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')

console.log(add(20, 30));
console.log(mul(20, 30));

// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";

console.log(name);
console.log(age);
console.log(height);

// 3. 引入静态资源 css 文件
require('./css/normal.css')

// 4. 引入静态资源 less 文件
require('./css/special.less')
document.writeln('<h2>你好啊 冯凡利</h2>')

// 5. 引入vue进行开发
import Vue from 'vue'

const App = {
  template: `
    <div>
      <span>{
  {message}}</span>
      <button @click="btnClick">按钮</button>
      <span>{
  {name}}</span>
    </div>
  `,
  data(){
    return {
      message: '冯凡利 i love you',
      name: '冯安晨'
    }
  },
  methods: {
    btnClick(){
      console.log('btnClick')
    }
  }
}

// 相比于 main2.js ，这里把 模板给抽出来 做了子组件

const app = new Vue({
  el: '#app',
  template: `<App/>`,
  components: {
    App
  }
})

index.html 不变，
然后打包npm run build，显示成功。打开浏览器显示成功。在这里插入图片描述

5. main4.js,抽取模板对象出来为一个js文件

  • 在学习组件化开发的时候，我说过以后的Vue开发过程中，我们都会采用组件化开发的思想。
  • 那么，在当前项目中，如果我也想采用组件化的形式进行开发，应该怎么做呢？
  • 查看下面的代码：
    我们也可以将上面的代码，我拿到下面来，将代码抽取到一个js文件中，并且导出。
    在这里插入图片描述
    我将这个对象，放到js文件下的app.js文件中，目录如下：
    在这里插入图片描述

app.js内容如下：

export default {
  template: `
    <div>
      <span>{
  {message}}</span>
      <button @click="btnClick">按钮</button>
      <span>{
  {name}}</span>
    </div>
  `,
  data(){
    return {
      message: '冯凡利 i love you',
      name: '冯安晨'
    }
  },
  methods: {
    btnClick(){
      console.log('btnClick')
    }
  }
}

main4.js主要内容修改如下：

// 5. 引入vue进行开发
import Vue from 'vue'

import App from './js/app'

/*
* 相比较于 main3.js ，这里把 模板子组件 提出来单放在了一个 vue/app.js 文件中。
* */
const app = new Vue({
  el: '#app',
  template: `<App/>`,
  components: {
    App
  }
})

index.html 不变，
然后打包npm run build，显示成功。打开浏览器显示成功。在这里插入图片描述

6. 将app.js封装为vue文件：组件化

  • 但是一个组件以一个js对象的形式进行组织和使用的时候是非常不方便的
  1. 一方面编写template模块非常的麻烦
  2. 另外一方面如果有样式的话，我们写在哪里比较合适呢？
  • 现在，我们以一种全新的方式来组织一个vue的组件
  • 但是，这个时候这个文件可以被正确的加载吗？
  1. 必然不可以，这种特殊的文件以及特殊的格式，必须有人帮助我们处理。
  2. 谁来处理呢？用它来处理：vue-loader以及vue-template-compiler。

  3. 安装vue-loader和vue-template-compiler。```
    npm install vue-loader@13.0.0 vue-template-compiler@2.6.12 --save-dev

    ```

  4. 添加webpack.config.js的配置文件，（rules中添加一个对象如下）：

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

编写vue/app.vue 文件，内容如下：

<template>
    <div>
        <span>{
  {message}}</span>
        <button @click="btnClick">按钮</button>
        <span>{
  {name}}</span>
        <br/>
        <Cpn/>
    </div>
</template>

<script>
    import Cpn from './Cpn';

    export default {
        name: "App",
        components: {
            Cpn: Cpn
        },
        data() {
            return {
                message: '冯凡利 i love you',
                name: '冯安晨'
            }
        },
        methods: {
            btnClick() {
                console.log('btnClick')
            }
        }
    }
</script>

<style scoped>

</style>

再编写里面的一个子组件cpn.vue，内容如下

<template>
    <div>
        <h2>我是Cpn子组件的标题</h2>
        <span>{
  {name}}</span>
    </div>
</template>

<script>
    export default {
        name: "Cpn",
        data() {
            return {
                name: '我是cpn子组件的内容'
            }
        }
    }
</script>

<style scoped>

</style>

main.js如下(主要部分)

// 5. 引入vue进行开发
import Vue from 'vue'

// import App from './js/app'
import App from './vue/App'

/*
* 这里多了一个 .vue 文件，所以要加一个 loader。
* */

/*
* 相比较于 main4.js ，
* 这里把 提出来的组件 vue/app.js ，进行了模板 与 js 分离，
* 写了一个新的文件 vue/App.vue，把模板组件给提出来了。
* */
const app = new Vue({
  el: '#app',
  template: `<App/>`,
  components: {
    App
  }
})

index.html 不变，
然后打包npm run build，显示成功。打开浏览器显示成功。
在这里插入图片描述

7. 安装vue-loader时报错并解决

npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev

报错

ERROR in ./src/vue/App.vue
Module build failed: Error:

Vue packages version mismatch:

- vue@2.6.12
- vue-template-compiler@2.5.21

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

版本问题
vue 的版本 2.6.12
这里的vue-template-compiler 版本为 2.5.21

这两个应该一致才可以，所以将 vue-template-compiler 版本改为 2.6.12 ，与 vue 的版本保持一致 ，即可。

最终的 命令为

npm install vue-loader@13.0.0 vue-template-compiler@2.6.12 --save-dev

8. 总结

到此结束，webpack搭建vue的小框架开发，一步一步安装webpack的loader，一步一步的提取js代码到提取出vue文件。就到此结束啦

正常的开发中是不会这样一步步来的，而是有vue-cli脚手架来完成的。再使用脚手架之前，还得学习一下webpack的plugin，来简化开发。继续看下一个博客。

文章标签：
JavaScript
关键词：
Webpack配置
Webpack vue
Webpack学习配置
Webpack抽离
Webpack配置vue
java冯坚持
目录
相关文章
html的七十二变
|
23天前
|
前端开发
在Webpack配置文件中，如何配置loader以处理其他类型的文件，如CSS或图片
在Webpack配置文件中，通过设置`module.rules`来配置loader处理不同类型的文件。例如，使用`css-loader`和`style-loader`处理CSS文件，使用`file-loader`或`url-loader`处理图片等资源文件。配置示例：在`rules`数组中添加对应规则，指定`test`匹配文件类型，`use`指定使用的loader。
html的七十二变
46 6
我是快乐的嘟嘟
|
28天前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略，可以更好地发挥`Webpack`与`Babel`的功能，提高项目的性能和开发效率。
我是快乐的嘟嘟
36 2
dufadayang
|
1月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离？
通过以上方法，可以有效地配置Webpack进行代码分离，根据项目的具体需求和场景选择合适的方式，能够显著提高应用的性能和用户体验。在实际应用中，还可以结合其他优化技术，进一步优化Webpack的打包结果和应用的加载速度。
dufadayang
42 5
dufadayang
|
1月前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分，实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置，以满足不同的构建和优化要求。
dufadayang
38 2
那年春天
|
1月前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些？
通过以上常见方法，可以根据项目的具体需求和场景，灵活地配置Webpack进行代码分离，从而提高应用的性能和加载速度，优化用户体验。
那年春天
30 3
土木林森
|
1月前
|
缓存 前端开发 JavaScript
前端性能优化：Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中，Webpack和Babel是不可或缺的工具，分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略，包括Webpack的代码压缩、缓存优化和代码分割，以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化，可以显著提升应用的加载速度和运行效率，从而改善用户体验。
土木林森
52 6
土木林森
|
1月前
|
缓存 前端开发 JavaScript
前端工程化：Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中，构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具，介绍了它们的特点和适用场景，并提供了配置优化的最佳实践。Webpack适合大型模块化项目，Gulp则适用于快速自动化构建流程。通过合理的配置优化，可以显著提升构建效率和性能。
土木林森
47 2
dufadayang
|
3月前
|
JavaScript
webpack打包TS
webpack打包TS
dufadayang
138 60
我是快乐的嘟嘟
|
2月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
我是快乐的嘟嘟
47 10
我是快乐的嘟嘟
|
2月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
我是快乐的嘟嘟
67 9

热门文章

最新文章

  • 1
    webpack window 使用sass来编译css样式
  • 2
    vue之webpack打包原理和用法详解
  • 3
    UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
  • 4
    wp2vite的妙用，让webpack项目支持vite
  • 5
    2.2.3 使用webpack loader
  • 6
    你真的理解 Webpack？请回答下列问题
  • 7
    webpack指南-webpack介绍-代码分割 - CSS
  • 8
    掘金课程《Webpack5 核心原理与应用实践》学习笔记
  • 9
    webpack ---- 打包发布
  • 10
    webpack深入浅出（二）| 小册免费学
  • 1
    使用Webpack的module.hot API来定义模块的热替换
    76
  • 2
    webpack热更新原理
    63
  • 3
    【TypeScript技术专栏】TypeScript与Webpack构建优化
    92
  • 4
    【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量，实现环境变量差异化、配置参数动态化和条件编译
    352
  • 5
    webpack实战——手写常用plugin
    321
  • 6
    webpack学习笔记--优化
    59
  • 7
    webpack学习笔记--基本配置
    79
  • 8
    深入了解Webpack：前端模块打包工具
    108
  • 9
    构建工具：配置Webpack打包Vue项目
    104
  • 10
    js开发：请解释什么是Webpack，以及它在项目中的作用。
    60

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Node.js 入门教程文档
  • Node.js 入门与实战
  • Python Web 框架 Flask 快速入门

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • 利用编译将 Vue 组件转成 React 组件
  • 23-Vue.js在前端...1506518547.pdf

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。