webpack环境配置分类结合vue使用

文件目录结构

 

按照目录结构创建好文件

控制台执行: npm install

/config/webpack.common.jsconst path = require('path')
const {merge} = require('webpack-merge')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpcakPlugin = require("html-webpack-plugin")
module.exports = {entry:'./src/main.js',output:{path:path.resolve(__dirname,'../dist'),filename:'[name].bundle.js'},plugins:[new CleanWebpackPlugin(),new HtmlWebpcakPlugin({template: path.resolve(__dirname,'../src/index.html')}),new VueLoaderPlugin()],module:{rules:[{test: /\.vue$/,loader: 'vue-loader'},{test: /\.css$/,use: ['vue-style-loader', 'css-loader','style-loader']}]},resolve: {extensions: ['.js', '.vue'],alias: {'vue$': 'vue/dist/vue.esm.js'}}
}

开发环境

 ./config/webpack.dev.js
/** @description: * @param: * @return: * @Date: 2024-03-06 14:07:54*/
const path = require('path')
const {merge} = require('webpack-merge')
const common = require('./webpack.common.js')module.exports = merge(common,{mode:'development',devtool:'inline-source-map',devServer:{static:path.join(__dirname,'../dist'),host:'localhost',port:8080,open:true}
})

生产环境

./config/webpack.prod.js
/** @description: * @param: * @return: * @Date: 2024-03-06 14:08:25*/
const path = require('path')
const {merge} = require('webpack-merge')
const common = require('./webpack.common.js')
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = merge(common,{mode:"production",output:{filename:'[name].[hash:7].js' //例如 wang.4678946.js},optimization:{minimize:true,minimizer:[new TerserWebpackPlugin()]}
})
src/main.js/** @description: * @param: * @return: * @Date: 2024-04-07 17:50:43*/
import Vue, { h } from 'vue'
import App from './App.vue'
new Vue({render:h=>h(App)
}).$mount('#app')
src/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>

src/App.vue<!--* @description: * @param: * @return: * @Date: 2024-04-07 18:47:25
-->
<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message:'你打的'}}}
</script><style></style>

#package.json
{"name": "test-vue","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "webpack serve --config ./config/webpack.dev.js ","build": "webpack --config ./config/webpack.dev.js"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^4.0.0","html-webpack-plugin": "^5.6.0","terser-webpack-plugin": "^5.3.10","vue": "^2.7.16","webpack": "^5.91.0","webpack-cli": "^5.1.4","webpack-dev-server": "^5.0.4","webpack-merge": "^5.10.0","css-loader": "^7.0.0","vue-loader": "^15.4.2","vue-style-loader": "^4.1.3","vue-template-compiler": "^2.7.16"},"dependencies": {}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/599094.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux系列】“dev-node1“ 运行的操作系统分析

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

充电桩项目,开源啦!

好&#xff0c;我是田哥 很多人&#xff0c;最近都在关注我的充电桩项目&#xff0c;之前建了一个微服务架构的项目&#xff0c;也有单体项目的代码开源。 今天&#xff0c;我把最新版微服务架构的充电桩项目源代码开源。 充电桩的输入端与交流电网直接连接&#xff0c;输出端都…

B2985A是德科技B2985A静电计

181/2461/8938产品概述&#xff1a; B2985A 静电计/高阻表具有 0.01 fA&#xff08;0.01 x 10-15 A&#xff09;的分辨率&#xff0c;可帮助您信心十足地测量小电流和最高可达 10 PΩ&#xff08;10 x 1015 Ω&#xff09;的大电阻。 它拥有 4.3 英寸 LCD 彩色液晶屏并配有图形…

UE5俯视角游戏案例代码查看

对于初学者来说&#xff0c;UE的项目案例是我们入手的最佳途径&#xff0c;首先代码量少&#xff0c;思路清晰&#xff0c;还能给你提供一个清晰的结构。所以&#xff0c;我创建了一个俯视角的官方案例&#xff0c;来查看一下官方的代码学习一下。 首先打开引擎&#xff0c;启…

c++20协程详解(四)

前言 到这就是协程的最后一节了。希望能帮到大家 代码 到这里我们整合下之前二、三节的代码 #include <coroutine> #include <functional> #include <chrono> #include <iostream> #include <thread> #include <mutex> #include <me…

抖音-引流私域转化模式1.0现场视频,从抖音源源不断把人加到私域,

抖音-引流私域转化模式1.0现场视频&#xff0c;从抖音源源不断把人加到私域&#xff0c;让加到私域的粉丝买单 抖音-引流私域转化模式1.0现场视频&#xff0c;从抖音源源不断把人加到私域 - 百创网-源码交易平台_网站源码_商城源码_小程序源码 课程内容&#xff1a; 01.第一…

1.8.3 卷积神经网络近年来在结构设计上的主要发展和变迁——GoogleNet/inception-v1

1.8.3 卷积神经网络近年来在结构设计上的主要发展和变迁——GoogleNet/ inception-v1 前情回顾&#xff1a; 1.8.1 卷积神经网络近年来在结构设计上的主要发展和变迁——AlexNet 1.8.2 卷积神经网络近年来在结构设计上的主要发展和变迁——VGGNet GoogleNet问题 在VGGNet简单堆…

zookeeper中的znode节点的一些功能和应用

zookeeper是一个挺好玩的东西 有着独特的选举机制&#xff0c;一般在中小型集群中&#xff0c;zookeeper一般装在三个节点 其中只有一个节点对外提供服务&#xff0c;处于leader状态&#xff0c;另外两台未follower状态 这得益于zookeeper独特的选举机制&#xff0c;可以保证le…

智慧园区革新之路:山海鲸可视化技术引领新变革

随着科技的飞速发展&#xff0c;智慧园区已成为城市现代化建设的重要组成部分。山海鲸可视化智慧园区解决方案&#xff0c;作为业界领先的数字化革新方案&#xff0c;正以其独特的技术优势和丰富的应用场景&#xff0c;引领着智慧园区建设的新潮流。 本文将带大家一起了解一下…

Lumos学习王佩丰Excel第二讲:单元格格式设置

今天学会GIF录制了&#xff0c;分享知识会更简便一些&#xff0c;话不多说&#xff0c;开始吧~ 一、美化表格 1、设置单元格格式的路径 从菜单栏进入&#xff1a; 选中区域&#xff08;单元格&#xff09;- 右键“设置单元格格式”&#xff1a; 2、合并单元格 合并一行 批量…

约跑小程序源码(asp.net+vue+element++uniapp+sqlserver)

开发语言&#xff1a;c# 框架&#xff1a;后端 asp.net mvc pc管理页面&#xff1a;vueelement 数据库&#xff1a;sqlserver 开发软件&#xff1a;eclipse/myeclipse/idea 浏览器&#xff1a;谷歌浏览器 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X …

初识Java中的NIO

1.概述 Java NIO 全称java non-blocking IO &#xff0c;是指 JDK 提供的新 API。从 JDK1.4 开始&#xff0c;Java 提供了一系列改进的输入/输出新特性&#xff0c;被统称为 NIO(即 New IO)&#xff0c;是同步非阻塞的。NIO采用内存映射文件的方式来处理输入输出&#xff0c;NI…