webpack搭建基础vue项目
2023-06-13 09:12:15 时间
新键目录
- src
- APP.vue
- index.js
npm init -y
npm i vue vue-loader vue-template-compiler cross-env css-loader style-loader url-loader file-loader html-webpack-plugin webpack-dev-server
APP.vue
<template>
<div id="app">
hello word
</div>
</template>
<script>
export default {
data(){
return {
title:'word hello'
}
}
}
</script>
<style>
</style>
index.js
import Vue from 'vue'
import App from './APP.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h)=>h(App)
}).$mount(root)//渲染App内容
package.json
...
"scripts": {
"build": "cross-env NODE=production webpack --config webpack.config.js",
"dev": "cross-env NODE=production webpack-dev-server --config webpack.config.js"
},
...
webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
//获取package.json cross 环境变量
const isDev = process.env.NODE_ENV==='development'
const config ={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(png|jpg|jpeg|gif|svg)/,
use:[
{
loader:'url-loader',
options:{
limit:1024,
name:'[name].[ext]'
}
}
]
}
]
},
plugins:[
//配置环境变量 全局访问
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev?'"development"':'"production"'
}
}),
new VueLoaderPlugin(),
new HTMLPlugin()
]
}
//开发模式生效
if(isDev){
//webpacserver
config.devServer={
port:3000,
host:'0.0.0.0',
overlay:{
errors:true
},
hot:true
}
//热更新
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
//sourcemap
config.devtool='#cheap-module-eval-source-map'
}
module.exports = config
相关文章
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- 2022前端二面必会vue面试题汇总
- Vue前端项目-主页布局-左侧导航菜单(静态)[通俗易懂]
- vue的安装和使用_vue-element
- vue-cli 初始----安装运行Vue项目
- vue源码分析-从new Vue开始
- 百行代码实现 Vue 2 响应式
- Vue生成二维码_vue视频软件怎么生成二维码
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue全家桶介绍_vue全家桶有什么好处
- Vue调试工具安装(vue devtools)
- VUE讲解系列- - -Vuex内容讲解(一)
- vue中动态化的按需使用keep-alive
- 在vue cli3.0 里面下载less,下载成功了还是提示没有 需要下载
- webpack+vue初始化项目
- vue项目移动端、pc端适配方案
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- 关于vue中v-for中使用bootstrap 5的modal弹框出现的问题
- Vue路由学习心得详解编程语言
- linux下快速部署Vue项目(linux部署vue)
- vue 保持组件状态防止重新渲染 缓存组件失效详解编程语言
- 基于Vue的Redis网页设计(vue设计redis页面)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue用Redis储存获取数据(vue获取redis)