搭建webpack
-
输入指令
npm init -y -
安装webpack依赖
npm install webpack webpack-cli --dev
-
创建配置文件 webpack.config.js
module.exports ={
mode:'development',//打包模式
entry:'./main.js',//入口文件
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
//loader
},
plugins:[
//plugins
],
devServer:{
//自动编译+自动刷新
hot:true,
port:5230,
compress: true,
}
}
}
2. 根目录下写入口文件，引入 vue
main.js
//创建vue实例
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
App.vue
<template>
<div>
{
{
msg}}
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
msg:'Hello World'
}
}
}
</script>
<style scoped>
</style>
这时候webpack需要loader才能“理解” .vue文件，以及需要各种各样的loader
3. 安装插件、loader
一下是列表自行安装
"dependencies": {
"babel-loader": "^9.1.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.8.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.3",
"style-loader": "^3.3.3",
"vue-loader": "^17.2.2",
"vue-template-compiler": "^2.7.14",
"webpack-dev-server": "^4.15.1"
}
公布更新 webpack配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const {VueLoaderPlugin} = require('vue-loader/dist/plugin');
const {
CleanWebpackPlugin} = require('clean-webpack-plugin')
const {
VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode:'development',
entry:'./main.js',
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test:/\.js$/,
loader:'babel-loader'
},
{
test:/\.css$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
modules:true
}
}
]
},
{
test:/\.(png|jpg|gif|jpeg|svg)$/,
use:[
{
loader:'file-loader',
options: {
name:'[name].[ext]',
outputPath:'image'
}
}
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
template:'./index.html'
}),
new CleanWebpackPlugin(),
new VueLoaderPlugin()
],
devServer:{
hot:true,
port:5230,
compress: true,
}
}