webpack打包vue（基础）

已于 2023-07-16 21:26:09 修改
阅读量238 收藏
点赞数
分类专栏： Webpack打包vue项目 文章标签： vue webpack Powered by 金山文档
于 2023-02-08 14:15:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52434393/article/details/128934861
版权
1.先创建vue项目，vue create 项目名称
2.安装依赖
npm i webpack webpack-cli style-loader css-loader webpack-dev-server vue-loader@15.9.8 html-webpack-plugin -D

备注：

  • vue和vue-template-compiler都要指定相同版本, 建议@2.6.12版本即可

==如果版本过低，会报错==

3.编写webpack.config.js配置文件
const path = require('path');
module.exports = {
    mode:'production',
    entry:path.join(__dirname,'/src/main.js'),
    output:{
        path:path.join(__dirname,'/dist'),
        filename:'./js/[name].js'
    },
    plugins:[
        new (require('vue-loader').VueLoaderPlugin)(),
        new (require('html-webpack-plugin'))({
            template:path.join(__dirname,"public/index.html"),
            filename:'./index.html'
        })
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.vue$/,use:['vue-loader']},
            {
                test:/\.png$/,
                type:"asset",
                generator:{
                    filename:'./image/[hash].[ext]' 
                },
                parser:{
                    dataUrlCondition:{
                        maxSize:1024*1024
                    }
                }
            }
        ]
    }
}
4.如若报这样的错误，修改public/index.html

public/index.html

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico">
    <title>标题</title>
  </head>
qq_52434393
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webpack基础(五)——vue文件打包
weixin_47450807的博客
01-29 1666
一、vue的不同构建版本 1、cjs版本（该版本都是完整版，都包含编译器） vue.cjs.js vue.cjs.prod.js //开发版本,代码进行压缩的 2、global版本（可以在浏览器通过script标签引入，并且在全局设置一个全局变量vue） vue.global.js vue.global.prod.js vue.runtime.global.js vue.runtime.global.prod.js 3、browser（四种版本都包含esm，浏览器的原生模块化开发，直接使用<scr
详解webpack打包vue时提取css
12-10
webpack打包vue项目的时候默认会把vue里的css打包到页面上。 webpack.config.js里的plugins加上以下配置 new webpack.LoaderOptionsPlugin({ test:/\.vue$/, options: { vue: { loaders: { css: ...
webpack打包vue项目基础配置
09-26
基于webpack4的一个针对vue基础项目的打包配置，对基础的vue项目进行简单的打包配置，可以支持less，scss，sass等css预编译，简单明了，教程：https://www.jianshu.com/p/81bfe6ba1c04
【Vue】如何使用Webpack实现打包操作
最新发布
qq_51933234的博客
04-27 966
其实，我觉得这个webpack打包更有意思的，把我们的源文件进行压缩后，可以直接调用或者运行。我之前玩过一段时间的小程序，当时有个人给了我一个程序代码就是打包过后的（当时自己还不知道打包这个东东），这个程序可以用小程序直接运行，但是那么代码就看不懂，让自己困惑了好一段时间。当然现在自己学的比较多，之前不同的地方来慢慢清晰了起来。为什么要说这个事呢？其实是希望在屏幕前看这篇博客的小伙伴能够不忘初心，砥砺前行。那些让你现在迷惑的，搞不懂的，终有一天，你会把所有的细节，所以的内部把内容都搞明白的！加油！各位！
Webpack打包.vue文件
smile14796的博客
09-28 189
第一步：下载loader npm i vue-loader vue-template-compiler -D 第二步：webpack.config.js配置loader { test:/\.vue$/, use:'vue-loader' } 依然报错（自己的错误信息没存到，找到同款报错信息） 百度得知：新版需要再下一个插件 npm i vue-loader-plugin -S 引入插件 const vueLoa
在vue中使用webpack打包
Liu_G_Q的博客
07-15 769
【代码】在vue中使用webpack打包。
使用webpack打包vue工程
weixin_34050005的博客
05-11 97
记得去年十月份的时候，自己在研究webpack，当时只是知道大致的用法，写了一个简单的demo，现在，经过了7个月对公司产品架构的使用，以及对vue-cli的使用，在了解了实际应用中各种需求之后，我自己写了一套适合开发的vue-cli 为了满足业务需要我这里配置了四套环境，打包的时候可以自己根据不同的业务场景进行打包 首先看整体目录结构： package.json里是各种依赖...
webpack打包vue文件
roupu的博客
08-07 170
忽略前面项目部署的流程，假定你的webpack项目中已经安装vue，并创建了vue单文件组件进行渲染了。
解决vue+webpack打包路径的问题
08-27
下面小编就为大家分享一篇解决vue+webpack打包路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
网站子目录部署VUE webpack 打包资源文件路径的正确引用方式1
08-03
似乎所有问题都解决了，但有个问题没有解决，就是如果我在css引了了图资源，webpack并不能很好的处理这的资源路径“m”件夹是站下的个录，如果我在开发的时候，
webpack打包vue，使用jquery和bootstrap的一些过程
qq_25061101的博客
08-09 1053
初次使用webpack打包vue，没有用vue-cli搭建手脚架。开始时要安装很多npm包，以下是package.json文件 { "name": "v1", "version": "1.0.0", "description": "", "main": "main.js", "scripts": {
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下： 1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置) 执行成功如下图所示： 然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。 此时我们直接在浏览器中打开index.html，是会报错的，什么都看不到。 2. 安装express-generator生成器 执行  $ npm install express-generator -g
Webpack支持.vue文件的打包
weixin_30381317的博客
10-31 167
那么我们在使用Vue.js的时候一定会涉及到去编写.vue文件，通过我们在该文件中填写的是组建。 那么Webpack本身也不支持打包.vue文件，我们同样需要借助第三方的loader来进行处理。 首先我们需要安装ES6/ES7的相关语法的打包支持，也就是Babel的支持，那么在我的另外一篇文章中有讲到，这里就不重点讲解了。 https://www.cnblogs.com/Richard-Ta...
webpack怎么打包vue文件
qq_58614993的博客
11-09 301
1.初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果； 2.开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件 监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的run方法开始执行编译； 3.确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去； 4.编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依
使用webpack打包vue项目
热门推荐
qq_42750982的博客
04-15 1万+
使用webpack打包vue项目 安装webpack工具，安装方式有两种：全局安装（命令：npm install -g webpack webpack-cli）以及安装在项目中，这里使用第二种： //在项目中安装，这里的-D表示运用到开发(development)环境 npm install -D webpack webpack-cli 在项目根目录新建一个webpack.config.js文件，配置打包时候需要的一些插件。**作用: 指示 webpack 干那些活(当你运行 webpack 指令
使用 webpack 搭建 vue 开发环境（一）
Jioho的博客
09-26 673
只要一直在路上，一切都不算远 使用 webpack 搭建 vue 开发环境（一） 虽然 vue-cli 已经非常成熟，成熟到可能自己写的 webpack 性能上不一定比得上 vue-cli。当然只是性能上，在实用性，拓展性，学习性上，自己能写出符合自己工程项目的 webpack 配置才是最好的 所有的代码都已经放在了 码云@Jioho/webpack_config 毕竟 github 有点慢~这边的网络上不去 master 分支的代码是每个版本迭代后最新的代码，所以第一篇文章的最终代码在 v0.0.1 分
webpack打包vue项目
qq_41186500的博客
10-29 265
自己总结一下vue项目的打包 build文件夹下的utils.js文件 —> 添加：publicPath: “…/…/”, if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: "../../", fallb...
webpack打包vue
08-26
要让webpack能够打包.vue文件，我们需要使用vue-loader来解析.vue文件。首先，我们需要安装vue-loader和vue-template-compiler这两个依赖项。可以使用以下命令来安装它们： ``` npm install vue-loader vue-template-compiler -D ``` 安装完成后，我们需要在webpack.config.js中添加相应的配置。首先，我们需要使用vue-loader来处理.vue文件。在module.rules数组中添加以下配置： ```javascript module: { rules: [ // ...其他规则 { test: /\.vue$/, loader: 'vue-loader' } ] } ``` 接下来，我们还需要配置resolve.extensions选项，以便webpack能够识别.vue文件。在resolve.extensions数组中添加'.vue'，例如： ```javascript resolve: { extensions: ['.js', '.vue', '.json'] } ``` 最后，我们还需要添加HtmlWebpackPlugin插件来处理html文件。可以使用以下命令来安装它： ``` npm install html-webpack-plugin -D ``` 然后，在webpack.config.js中添加以下配置： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ...其他配置 plugins: [ // ...其他插件 new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') }) ] }; ``` 这样，webpack就能够正确地解析.vue文件并打包vue工程了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [使用webpack打包vue项目](https://blog.csdn.net/qq_42750982/article/details/124202782)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [webpack打包Vue项目](https://blog.csdn.net/duxiaoxie123/article/details/116274852)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值