webpack 配置vue优化解析 解析编译vue文件

最新推荐文章于 2023-08-07 17:32:43 发布
最新推荐文章于 2023-08-07 17:32:43 发布
阅读量815 收藏 2
点赞数 1
分类专栏： webpack vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/108117815
版权
vue 同时被 2 个专栏收录
58 篇文章 0 订阅
订阅专栏
webpack
16 篇文章 1 订阅
订阅专栏

文章目录

目录结构

在这里插入图片描述

简化流程

初始写法

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./dist/build.js"></script>
</body>
</html>

main.js

new Vue({
    el:'#app',
    data:{
        msg:'webpack 使用 vue'
    }
})
简化1 配置template

template 会替换 el挂载区域
main.js

new Vue({
    el:'#app',
    template:`<div>{{msg}} </div>`,
    data:{
        msg:'webpack 使用 vue'
    }
})
简化2 配置组件

main.js

const tmp = {
    template:`<div>
        {{name}}
        使用组件分离代码 
    </div>`,
    data:()=>({
        name:'使用组件分离代码'
    })
}
new Vue({
    el:'#app',
    template:`<tmp/>`, // `<tmp></tmp>`,
    components:{tmp}
})
简化3 组件对象抽离js 使用模块化

tem.js

export default {
    template:`<div>
        {{name}}
        使用组件分离代码 
    </div>`,
    data:()=>({
        name:'使用组件分离代码'
    })
}

main.js

import tmp from 'vue/temp.js'

new Vue({
    el:'#app',
    template:`<tmp></tmp>`,
    components:{tmp}
})
简化 4 使用vue文件 实现 结构 样式 行为分离

tem.vue

<template>
  <div>
      使用vue文件 实现 结构 样式 行为分离
      {{msg}}
  </div>
</template>

<script>
export default {
	data:()=>({
		msg:"使用vue文件 实现 结构 样式 行为分离"
	}),
	methods:{}
}
</script>

<style></style>

main.js

import App from './App.vue'

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

已经越来越解决 vue-cli mian.js 的写法了
需要配置loader

接近脚手架mian.js写法 使用 render 渲染模版
import App from './App.vue'

new Vue({
     render:h=>h(App)
}).$mount('#app')

解析编译vue文件

安装loader
// vue-loader 加载vue文件
// vue-template-compiler vue模版编译
npm i vue vue-template-compiler vue-loader -d
配置webpack webpack.config.js

官方配置文档

// 版本较高的vue-loader 依赖插件 plugin
// 不用插件的话  可以使用 vue-loader@13.0.0 版本
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry:'./src/main.js',
    output:{
        path: path.join(__dirname,'dist'),
        filename: 'build.js'
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader: 'vue-loader' // ['vue-loader'] => 'vue-loader'
            }
        ]
    },
    resolve:{ // resolve: 解决
        // 配置后缀名简写 导入的时候可以省略后缀名 import './a.vue' => import 'a'
        extensions:['.js','.vue','.css'],
        alias:{ // alias（别名）
            // 默认导入的是  vue/dist/vue.runtime.js
            // 用处 当导入vue的时候(import Vue from 'vue') 的时候  相当于导入 'vue/dist/vue.esm.js'  esm=>ESModule
            'vue$':'vue/dist/vue.esm.js'  
        }  
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}
package.json
{
  "name": "webpack-vue.vue",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.11",
    "vue-template-compiler": "^2.6.11",
    "vue-loader": "^15.9.3"
  },
  "devDependencies": {
    "webpack": "^3.6.0"
  },
  "description": ""
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>
    <script src="./dist/build.js"></script>
</body>
</html>
main.js
import App from './App.vue'

new Vue({
   render:h=>h(App)
}).$mount('#app')
App.vue
<template>
  <div>
      vue app 组件
  </div>
</template>

<script>
export default {}
</script>

<style></style>
打包效果
npm run build

在这里插入图片描述

tianmeng1999
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过SplitChunks，webpackChunkName对代码分割以及mini-css-extract-plugin分离css代码的实践
xiaoliliaq的博客
05-11 1051
通过SplitChunks，webpackChunkName对代码分割以及mini-css-extract-plugin分离css代码的实践 需环境 开始之前，请各位给自己电脑安装一下Nodejs，具体安装方法这里我就不做讲解了，各位可以移步Node官网查看文档然后对应系统版本进行安装，以下是我的Node or Npm版本 { "engines": { "node": "10.16.0", "npm": "6.9.0" } } 目录结构 . ├── dist ├── node_mo...
webpack打包vue项目基础配置
09-26
基于webpack4的一个针对vue基础项目的打包配置，对基础的vue项目进行简单的打包配置，可以支持less，scss，sass等css预编译，简单明了，教程：https://www.jianshu.com/p/81bfe6ba1c04
vue-cli脚手架中webpack配置基础文件详解
weixin_34253539的博客
05-10 633
一、前言 vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webp...
webpack5.X配置编译.vue文件
jxd15912157813的博客
10-26 173
使用npm安装依赖和插件 npm i vue-loader vue-template-compilervue-loader-plugin--save-dev 在webpack.config.js内配置 const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ { test: /\.vue...
一步步使用 webpack 第四篇：使用 webpack 编译 vue 代码
weixin_33695082的博客
04-24 1915
前言 之前写的三篇文章，分别简单介绍了如何配置 webpack 完成 es6 代码编译、PostCSS 代码编译、以及 使用 webpack 管理资源文件。接下来将配置 webpack 完成 vue 代码的编译。 版本说明 本文使用的 webpack 的版本为：4.30.0 开始搭建 本文的目的是完成 vue 的编译 安装 loader 使用命令行安装 vue 的 loader： $ cnpm i...
三言两语说透webpack对vue的编译
xuxian的博客
08-07 1104
Webpack作为当下最流行的前端构建工具，它可以处理模块化的JavaScript项目，进行代码打包和优化。在Vue项目中，Webpack发挥着不可或缺的作用，它负责分析项目中的依赖图谱，递归地构建bundles，从而实现整个项目的构建。
详解基于vue-cli优化的webpack配置
08-28
在项目逐渐成熟并需要提高构建效率时，基于Vue CLI进行Webpack配置优化就显得尤为重要。本文将详细介绍几个关键的优化策略。 1. **externals配置**：Webpack允许通过`externals`配置来避免将一些大型或者频繁更新的...
优化Vue项目编译文件大小的方法步骤
12-10
在优化Vue项目的编译文件大小时，主要的策略是针对webpack打包配置进行调整，以便减少编译后的文件体积。以下是一些关键的优化方法： 1. **定位问题**： 使用`webpack-bundle-analyzer`工具来分析编译后的文件大小...
浅谈webpack编译vue项目生成的代码探索
08-28
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它能够将多个模块按照依赖关系进行编译和打包。...通过查看 Webpack 的配置文件（webpack.config.js），我们可以进一步定制编译过程，满足项目的特定需求。
vue-cli中的webpack配置详解
08-29
Vue-cli中的Webpack配置项是项目中最重要的一部分，负责配置Webpack的行为，包括入口文件、输出文件、模块解析、loader配置等。通过理解和掌握这些配置项，开发者可以更好地使用Vue-cli，快速构建和部署Vue.js应用...
vue中webpack编译打包使用之Vue知识点归纳(十一)
代码小疯子
12-03 864
1 什么是webpack，到底需要解决什么问题 近几年前端的快速发展，前端已不是简单的html, css, jquery这样一套技术了.前端的世界出现了越来越多的新的技术。例如 jsx（类xml语法，增强js语义，结构清晰抽象程度高，诞生了跨平台 react native 代码模块化） scss, stylus, less预编译语言（缓解浏览器兼容造成的冗余，精简的语法） AMD CommonJ...
webpack_vue打包优化
热门推荐
编程知识分享，主打前端
07-26 3万+
打包
配置Vue脚手架，使用webpack解析vue项目
qq_45515182的博客
08-05 1057
安装nodejs环境 官网下载地址：https://nodejs.org/en/
webpack（二）之配置vue组件
weixin_43841308的博客
02-19 196
webpack中配置 .vue 组 webpack中配置.vue组件页面的解析 运行cnpm i vue -S将vue安装为运行依赖； 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖； 运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会...
用webpack解析.vue单文件
weixin_30396699的博客
08-06 538
首先创建项目文件夹 vueTest，执行： cd vueTest && npm init 安装webpack和vue npm i -D webpacknpm i -D webpack-clinpm i -S vue 创建下面的项目目录： App.vue ： <template> <h1>Hello {{ msg ...
一个菜鸟用webpack-vue.js编译过程碰到的坑~~！！
weixin_30530523的博客
04-21 237
webpack+vue自动化编译的坑还是很多的。 先介绍下Eslint 我不是来教Eslint，点我 正题： 第一坑： 把main.js文件中的注释我全给删了（处女座，洁癖~） 编译报错上图 继续上图 这段注释不可删~！！！切记！！ 这段注释不可删~！！！切记！！ 这段注释不可删~！！！切记！！ 第二坑： 代码结束留一行~！！！代码结束留一行~！！！代码结...
[零基础学习Vue3+webpack项目]的vue3代码的开发编译及其启动项目服务的详解（3）
月影WEB的博客
05-10 852
在[零基础学习Vue+webpack]之vue+webpack项目的基础依赖项的安装详解（1）https://blog.csdn.net/qq_34297287/article/details/124656994?spm=1001.2014.3001.5501 和 [零基础学习Vue+webpack]之vue3+webpack项目的webpack对vue3进行编码打包的详解（2）https://blog.csdn.net/qq_34297287/article/details/124677916?spm
webpack打包原理vue_webpack打包原理和打包优化（简版）
weixin_33544435的博客
01-26 837
一、打包原理2.打包后的文件是一个自执行函数，参数是一个json，这个json是以文件路径为key，另一个函数为value的，这个函数内是一个eval函数，用于执行文件的方法。对于多个文件打包成一个文件，主要是由一个__webpack_require__来引入另一个文件，并通过递归的方式，来打包至一个js块中。二、打包优化1.自带优化a)tree-shaking：依赖关系解析（不用的不打包），只在...
vue webpack项目打包优化，从60s到17s的优化之路
吹过麦田的风的专栏
03-07 5516
下面就进入本文的正题了： 对本文感兴趣的，想必都有一定的开发经验了，对webpack工具也有了一定的了解。只是在webpack生态里面有太多的插件了，除了默认推荐的插件之外，不知道怎么找更好用的插件，其实当初，我也有和你一样的困惑，只是我喜欢钻研，喜欢尝试。基于webpack的项目啦都有一个弊端，项目体积越大，打包耗时越长。下面就把我优化项目的案例展示给你。激动么~~~ Vue项目比较大．或...
常见的webpack层面vue项目优化
最新发布
09-09
常见的webpack层面的Vue项目优化包括以下几个方面： 1. 使用Bundle分析工具：Webpack提供了一些分析工具，如webpack-bundle-analyzer，可以用来分析打包后的代码，找出代码中的冗余、重复或过大的部分，从而进行优化。 2. 编译优化：通过对Webpack的配置进行优化，可以提高Vue项目的编译速度和效率。例如，可以使用缓存来减少重复编译的时间，配置合理的代码拆分和懒加载来降低初始加载的资源大小，使用Tree Shaking来消除未使用的代码等等。 3. 基础的Web技术优化：对于Vue项目来说，还可以通过一些基础的Web技术优化来提升性能。例如，开启gzip压缩可以减小资源文件的体积，加快下载速度；合理使用缓存策略，利用浏览器缓存来减少请求次数；使用CDN来加速静态资源的加载等等。 总结起来，常见的webpack层面的Vue项目优化包括使用Bundle分析工具、编译优化和基础的Web技术优化。通过这些优化手段，可以提高Vue项目的性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值