webpack打包vue项目demo

最新推荐文章于 2025-07-11 16:02:57 发布

原创最新推荐文章于 2025-07-11 16:02:57 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

web方向专栏收录该内容

53 篇文章

订阅专栏

本文介绍了如何使用webpack打包Vue项目，包括创建项目目录、初始化npm、安装必要loader、编写配置文件、创建组件和入口文件，以及最终的打包过程。在webpack 2.x版本中，遇到某些loader配置问题时，可以通过创建对应的loadername.config.js文件解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天在学习使用webpack去打包vue，遇到了一些坑，在这里提供一套可用的配置供大家参考。
这里写图片描述

上面是我的目录。（有些文件不是开始新建的文件，下面会进行说明）

首先大家可以新建一个空目录，假设叫vue-test。
进入到里面新建上述的App.vue,main.js,webpack.config.js,index.html这四个文件。
接下来使用npm进行初始化。没有安装node.js的小伙伴安装一下吧，目前npm是安装node时自带了。不用单独安装了。

初始化： npm init -y
安装必要的loader：见下方图
编写配置文件：webpack.config.js.，见下图
编写App.vue：主要由三个部分组成，template，script，style。
编写main.js
编写index.html文件
使用webpack进行打包，我的版本是2.x。因为配置信息已经写好，所以如果不加参数的话，可以直接在命令行中敲：webpack。就会看到目标文件bundle.js生成。然后手动打开index.html。看到了welcome vue字样。

注：babel.config.js这个文件是为了解决webpack2.x时有些loader的plugin无法进行配置，必须建立对应的 loadername.config.js所进行建立的，里面是：

使用1.0的同学可以去查一下1.0的一个写法，这里就不再演示。

babel.config.js
module.exports=function(){
    plugins:[
        require("transform-runtime")
    ]
}

APP.vue
<template>
    <div id="app"> //如果你采用的是vue2.0,那么在template里面必须要有一个父标签包含住你的目标标签，本想输出h2，现在要在外面嵌套一层div,就是这个道理。如果使用的是vue1.0就不需要了。
        <h2>{{msg}}</h2>
    </div>
</template>

<script>
export default{
    data(){
        return{
            msg:"welcome vue"
        }   
    }
}
</script>

<style>
</style>

 main.js
 import Vue from "vue";
 import app from "./App.vue";

 new Vue({
    el:".container",
    render:h=>h(app)//如果你安装的是vue2.0请采用这个语法
 });
||
 new Vue({
    el:".container",
    components：{
            app:app
        }//如果你安装的是vue1.0请采用这个语法
 });

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="container" style="height:200px">    //如果是vue2.0这边不用指定<app>这个模板标签，并且使用vue绑定的这个div会在最后的页面中被取代，这就是为什么2.0需要一个嵌套的元素的原因。
    </div>
    //如果是1.0版本就按照下面的写
    <div class="container" style="height:200px">    
        <app></app>
    </div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

这里写图片描述
上图是我安装的loader，有些看上去没有必要，但是我在打包时明确给我指明了缺少这个module，所以我就添加上了~。

这里写图片描述
上图是webpack.config.js的配置：其中entry代表入口文件，output代表输出文件信息，module是重要的参数，里面记录了loaders信息。里面配置了解析.vue文件的loader。解析js文件（主要用于解析es6语法）的babel-loader。resolve是预防无法解析vue模块进行的配置。