vueplugin搭建本地服务器配置文件分离webpack(代码片段)

鸟随二月 鸟随二月     2022-12-12     222

关键词:

上一篇

相关代码

基本插件

1.配置webpack.config.js

打包html的plugin

参考视频

1.通过node安装插件
2.配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
//在module.exports中
 plugins: [
      new webpack.BannerPlugin('最终版权归aaa所有'),
      new HtmlWebpackPlugin(
        template: 'index.html'
      ),
      new UglifyjsWebpackPlugin()
  ]

js压缩的plugin

搭建本地服务器


1.配置webpack.config.js


2. 配置package.json

这样的话运行服务器会自动打开浏览器

3.运行 npm run dev

webpack配置文件的分离

相关代码
建立一个配置文件(支付webpack.config.js)的内容

要做一下改善

然后再建立

dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, 
  devServer: 
    contentBase: './dist',
    inline: true
  
)

prod.config.js

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, 
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
)


其实到这里webpack.config.js已经没有用了可以删除了
接着是在package.json中指明配置文件

运行npm run build 自动打包到配置文件所在的文件夹里

如果修改路径的话

下一篇

windows搭建http本地yum源

    我这里用到HFS作为web服务器下下载链接见文末把这repodata、Package和RPM-GPG-KEY-CentOS-7这三个文件从centos7光盘中提取放在web根目录下yum文件夹不要用WinRAR提取,因为WinRAR提取出的文件无后缀名可以UltraISO提取。如图... 查看详情

关于前后端分离的开发模式

...端渲染,而前端工程师的工作就是完成切图及静态页面的搭建,他们的精力都放在了辅助别人完成项目的工作,背锅还不讨好,责任划分不明确。因此今天要讨论的话题就是前后端分离的开发,让前端工程师的工作更饱满,更具... 查看详情

haporxy搭建web群集

 搭建nginx安装nginx依赖软件解压nginx安装包创建nginx管理用户编译安装nginx优化nginx命令创建网站测试页启动nginx服务监听nginx服务第二台nginx创建网站测试页安装haproxy安装haproxy依赖软件编译配置haproxy生成主配置文件优化命令生成... 查看详情

haporxy搭建web群集

 搭建nginx安装nginx依赖软件解压nginx安装包创建nginx管理用户编译安装nginx优化nginx命令创建网站测试页启动nginx服务监听nginx服务第二台nginx创建网站测试页安装haproxy安装haproxy依赖软件编译配置haproxy生成主配置文件优化命令生成... 查看详情

mycat学习第二天之性能监控,读写分离,集群搭建(代码片段)

...at-web之MySQL性能监控指标1.5Mycat-web之SQL监控2.MyCat读写分离搭建2.1MySQL主从复制原理2.2MySQL一主一从搭建2.3MyCat一主一从读写分离2.4MySQL双主双从搭建2.5MyCat双主双从读写分离3.Mycat集群搭建 查看详情

完全前后端分离项目

...成后,我们将打包生成的dist文件夹丢给自己的静态文件服务器。  然后问题来了,我们该怎么搭建自己的静态文件服务器呢?  这里我们只讨论nginx  nginx是什么请自行搜索,我们这里讲述如何配置多个nginx的多端口映射... 查看详情

nginx系列3:搭建一个静态资源web服务器

搭建静态资源web服务器1,创建静态页面在nginx的安装目录(/usr/local/nginx)下创建文件夹webapplications/helloworld,然后创建一个名为index.html的页面。2,修改配置文件打开nginx的配置文件(默认在/usr/local/nginx/conf/nginx.conf),添加以下... 查看详情

vue+webpack项目中使用dev-server搭建虚拟服务器,请求json文件数据,实现前后台分离开发

在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请求,访问自己mock的假数据虚拟请求后台... 查看详情

centos配置本地yum源

  如果CentOS服务器处在内网环境中时,如果缺少依赖手动安装那么会非常麻烦,要花费很多时间来寻找rpm包,现在如果搭建本地的yum源,就非常方便了,如果搭建http的,那么局域网内其他服务器就都可以使用了,使用yum源首... 查看详情

论坛搭建

配置分离结构的lamp一、准备三台虚机vh01.tedu.cn192.168.4.1mysqlvh02.tedu.cn192.168.4.2web1vh03.tedu.cn192.168.4.3web2二、在vh01上配置mysql1、安装[[email protected]~]#yuminstall-ymariadb-server2、起服务[[email protected] 查看详情

ruoyi-vue(若依前后端分离版本)环境搭建用eclipse安装redis后端配置配置node环境前端配置

本地部署ruoyi-vue前后端分离版后端配置下载源码并数据库建表安装redis后端配置完成,运行RuoYi-Vue-master\\ruoyi-admin\\src\\main\\java\\com\\ruoyi下的RuoYiApplication.java文件启动前端配置配置node环境在E:\\eclipse\\spaceone\\RuoYi-Vue-master文件路... 查看详情

lnmmp架构搭建wp个人博客实现动静态内容分离

思路:  搭建wordpress个人博客,nginx做动静态文件分离,nginx处理静态内容(本地)  动态内容由上游服务器php-fpm来完成规划:  nginx  反代后端php-fpm      172.16.43.1  php-fp 查看详情

centos如何搭建本地和局域网yum源

...搭建本地yum源本地yum源,就意味着只有搭建该yum源的这台服务器能使用,其它的服务器都不能使用该yum源。搭建本地yum源的所有步骤如下:搭建局域网yum源除了可以搭建本地yum源外,我们还可以基于HTTP方式配置yum源,这样我们... 查看详情

tomcat服务器部署+web项目搭建

Tomcat服务器部署+Web项目搭建1.Tomcat服务器    1.Tomcat下载    2.Tomcat启动与关闭    3.配置端口号2.IDEA搭建Web项目1.web项目创建2.本地服务器配置Tomcat下载tomcat官网:tomcat1.选择与自己电脑对应的位数下载,我们下... 查看详情

ftp服务搭建与配置

...就是让用户连接一个远程计算机(这些计算机上运行着FTP服务器程序),并查看远程计算机中的文件,然后把文件从远程计算机复制到本地计算机,或把本地 查看详情

使用lighttpd搭建轻量级web服务器详解(代码片段)

目录1、概述2、编译openssl3、编译lighttpd4、在lighttpd中配置https4.1、目录设计4.2、lighttpd默认配置文件导入4.3、Lighttpd.conf配置文件修改4.4、modules.conf配置文件修改4.5、fastcgi.conf配置文件修改4.6、生成Openssl证书5、测试demo编写5.1、编... 查看详情

nfs架构搭建及配置

...应用中,本地NFS的客户端应用可以透明地读写位于远端NFS服务器上的文件,就像访问本地文件一样。NFS的数据传输基于RPC(remoteprocedurecall)协议。应用场景A,B,C三 查看详情

nfs架构搭建及配置

...应用中,本地NFS的客户端应用可以透明地读写位于远端NFS服务器上的文件,就像访问本地文件一样。NFS的数据传输基于RPC(remoteprocedurecall)协议。应用场景A,B,C三 查看详情