webpack构建Vue脚手架
Posted JackySei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack构建Vue脚手架相关的知识,希望对你有一定的参考价值。
webpack构建Vue脚手架
创建项目,安装依赖
新建一个文件夹,在这个文件夹下安装依赖。
基于 webpack 5 从零搭建 Vue 脚手架使用的依赖有:vue、element-ui、vue-router
开发依赖有:webpack、webpack-cli、vue-loader、vue-template-compiler、sass-loader、sass、css-loader、style-loader、babel-loader、@babel/core、@babel/preset-env
有些暂时用不到,但是可以先一次性把他们安装进来。
创建index.html
写页面需要index.html,先创建一个
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
这个id=app的div就是等会放vue组件的地方,这里先把它写在这。
这个bundle.js是最后打包生成的js,在这里引用,我们也还是先把它写在这。
创建入口文件main.js
打包需要有一个入口文件
创建main.js
import createApp from 'vue'
import App from './App.vue'
createApp(App).mount('#app');
可以发现这里的App组件还没有创建。从代码中可以看出这里的App组件就是添加到id为app的那个div中的内容。下一步创建它。
创建App.vue
随便写一些内容
<template>
<div>
<div>Hello World</div>
<button>BTN1</button>
<button>BTN2</button>
</div>
</template>
<script>
export default
</script>
<style lang="scss" scoped>
</style>
到这一步代码相关的就已经完成,接下来需要对webpack进行修改。
Webpack配置
创建webpack.config.js文件,进行配置的编辑。
注意,到这一步的时候,为了规范,将项目目录格式修改成下图所示
进入webpack.config.js配置文件中编写
const path = require('path')
const VueLoaderPlugin = require('vue-loader')
module.exports =
entry:'./src/main.js',
output:
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
,
module:
rules:[
test:/\\.vue$/,use:'vue-loader',
test:/\\.s[ca]ss$/,use:['style-loader','css-loader','scss-loader'],
test:/.m?js$/,use:
loader:'babel-loader',
options:
presets:['@babel/preset-env'],
,
// test:/\\.(png|jpg?g|gif|svg|webp)$/,use:loader:'file-loader',options:esModule:false
test:/\\.(png|jpg?g|gif|svg|webp)$/,type:'assets/resource'
]
,
plugins:[
new VueLoaderPlugin(),
]
其中entry为入口文件
output为输出文件,在这其中可以设置输出的路径和文件名称,
剩下的就是一些打包规则和插件的运用。
比如解析.vue结尾的文件就需要用到刚刚安装的vue-loader,之后的那些也是同理,要让webpack知道解析哪种文件需要用到哪些东西,当需要多个loader时,是用数组保存的,解析时是从右到左,就比如上面对sass结尾的文件,打包时,需要用到三个loader,但实际上webpack使用loader的顺序时scss-loader->css-loader->style-loader。
webpack的配置完成后,就可以进入启动命令相关的配置了。
配置启动命令
进入package.json中
将调试命令修改为
"scripts":
"serve": "webpack --mode=development --watch",
"build": "webpack --mode=production"
,
如果没有的话就新建
其中–mode=development代表是在开发模式下打包的,配置比较简单,是一个能让代码本地调试运行的环境。打包速度较快,毕竟开发时谁也不想因为打包而等太久。
而另一个是生产模式,一旦项目发布要发布到生产环境中给别人使用时,那么就需要对打包后代码的性能,体积都要进行优化,而相对的打包速度也会比开发模式慢,毕竟多做了很多事情
watch是对项目文件的监听,监听到文件修改之后,会重新编译打包。
以上是关于webpack构建Vue脚手架的主要内容,如果未能解决你的问题,请参考以下文章
Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目