VUE学习-补充webpack（五）

最新推荐文章于 2024-04-20 14:23:02 发布

霹雳娇娃么么哒

最新推荐文章于 2024-04-20 14:23:02 发布

阅读量274

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_44968323/article/details/118180037

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

webpack

其实就是一个打包工具，可以将多个js文件打包成一个js文件，从而减少http的请求次数（webpack只能打包js文件，但是对于一个项目而言不止有js，如果要打包其他文件就要借助于loader）

A）编写项目入口

1、新建一个目录，使用vscode打开

在这里插入图片描述

2、使用快捷键打开终端窗口

ctrl+～

3、cnpm安装

由于资源的限制，使用npm安装依赖包的时候经常失败，建议使用npm的国内镜像cnpm 命令行工具代替默认的npm

在命令行中输入以下内容等待安装即可

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装cnpm成功之后，所以用到npm的地方可以全部替换为cnpm

配置npm的源在淘宝镜像上

npm config set registry https://registry.npm.taobao.org

4、完成项目初始化

在终端输入命令：npm init -y

解释： init 初始化。 -y使用默认参数

在这里插入图片描述

5、安装webpack

官网：https://www.webpackjs.com/guides/installation/

需要使用webpack来完成打包，因此需要安装webpack和webpack-cli

在命令行中执行：npm install -D webpack@4 webpack-cli

因为目前存在webpack的5版本，此处使用4，加上版本号

install ：安装
-D：安装开发环境依赖，是–save-dev的简写

在这里插入图片描述

6、在终端执行npm install vue

7、根路径下创建index.html

输入！后tab，可以快速生成html头文件信息

在body中添加一个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

8、创建目录结构src和main.js

创建src目录，在src目录下创建main.js作为项目的总入口文件

在main.js中，完成如下操作：

创建vue根实例

//创建Vue根实例
import Vue from "vue";

new Vue({
    el : '#app'
})

挂载App组件

在src下创建App.vue

//模版部分
<template>
    <div>this is App</div>
</template>

<script>
export default {
    name: 'App',
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

在main.js中导入App组件：

在这里插入图片描述

9、将main.js引入index.html中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
</head>
<body>
    <div id="app"></div>

    <script src="./src/main.js"></script>
</body>
</html>

B）webpack基本配置

为了让浏览器能够正确的解析，需要使用webpack将我们的源代码进行打包

1、创建webpack配置文件

在根目录下创建webpack.config.js文件

//导入path模块
const path = require('path')

module.exports = {
    //项目打包入口
    entry : './src/main.js',
    //打包出口
    output : {
        filename : 'bundle.js',   //打包的文件名
        path : path.resolve(__dirname,'dist')  //打包的路径
    }
}

在这里插入图片描述

2、编写webpack脚本

在package.json文件中添加：“build” : “webpack”

在这里插入图片描述

{
  "name": "VUE_TODO",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build" : "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}

3、测试

在命令行中执行npm run build

会发现提示如下错误：

在这里插入图片描述

原因是：webpack只能打包js文件，对于后缀名为vue的文件不能打包

通过vue-loader来打包

六、使用vue-loader打包vue文件

vue-loader官方文档：https://vue-loader.vuejs.org/zh/guide/#vue-cl

1、安装vue-loader

你应该将 vue-loader 和 vue-template-compiler 一起安装——除非你是使用自行 fork 版本的 Vue 模板编译器的高阶用户：

安装命令：

npm install -D vue-loader vue-template-compiler

在这里插入图片描述

`vue-template-compiler` 需要独立安装的原因是你可以单独指定其版本。

每个 `vue` 包的新版本发布时，一个相应版本的 `vue-template-compiler` 也会随之发布。编译器的版本必须和基本的 `vue` 包保持同步，这样 `vue-loader` 就会生成兼容运行时的代码。这意味着**你每次升级项目中的 `vue` 包时，也应该匹配升级 `vue-template-compiler`。**

安装vue-loader后会发现一个问题，如下图：

发现vue-loader依赖css-loader，因此要手动安装一下css-loader

在这里插入图片描述

2、安装css-loader

安装命令：

npm install -D css-loader

在这里插入图片描述

3、webpack 配置

官网配置文档：https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE

vue-loader从15版本开始，vue-loader需要再webpack中添加一个插件

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：

在这里插入图片描述

图片19行少了一个$，代码如下：

完整代码：

// webpack.config.js
//导入path模块
const path = require('path')

//====》引入vue-loader的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    //项目打包入口
    entry : './src/main.js',
    //打包出口
    output : {
        filename : 'bundle.js',   //打包的文件名
        path : path.resolve(__dirname,'dist')  //打包的路径
    },
    //=====》打包规则
    //当碰到以.vue结尾的文件时，使用vue-loader来打包
    module : {
        rules : [{
            test : /\.vue$/,
            loader : 'vue-loader'
        }]
    },
    //插件配置
    plugins : [
        new VueLoaderPlugin()
    ]
}

4、打包测试

运行命令：

npm run build

在这里插入图片描述

补充：

在打包命令成功以后会出现如下提示：

在这里插入图片描述

出现上述原因是因为没有指定模式，分为开发（develoment）和生产（production）模式，这两种的模式打包出来的dist包中的bundle.js文件的大小不一样

在web pack.config.js中进行配置：

在这里插入图片描述

再执行打包命令：npm run build

5、在主页中引入bundle.js

在index中引入

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
</head>
<body>
    <div id="app"></div>

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

运行后，F12看报错信息

在这里插入图片描述

错误原因：

vue会打包生成三个文件：

Runtime only 的文件 vue.common.js
Compiler only的文件compiler.js
Runtime + compiler的文件vue.js

而默认导出的是vue.common.js，解决如下：

#webpack.config.js中添加如下配置
resolve : {
    alias :{
    	'vue' : 'vue/dist/vue.js'
    }
}

在这里插入图片描述

再次执行打包命令：npm run build即可

在这里插入图片描述

霹雳娇娃么么哒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习-补充webpack（五）

webpack其实就是一个打包工具，可以将多个js文件打包成一个js文件，从而减少http的请求次数（webpack只能打包js文件，但是对于一个项目而言不止有js，如果要打包其他文件就要借助于loader）A）编写项目入口1、新建一个目录，使用vscode打开2、使用快捷键打开终端窗口ctrl+～3、cnpm安装由于资源的限制，使用npm安装依赖包的时候经常失败，建议使用npm的国内镜像cnpm 命令行工具代替默认的npm在命令行中输入以下内容等待安装即可npm install -g
复制链接

扫一扫