换了新公司，给我感觉就是累，让我走管理的想法越来越重，所以要继续卷了。 以vue3+webpack5 从零到一开始搭建项目，会分享自己学到的，忘各位共勉，和提出建议，让我学习下
准备
mkdir demo-vue
npm i vue vue-loader
npm i webpack webpack-cli webpack-dev-server
npm i --save-dev html-webpack-plugin
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install node-sass
npm install sass-loader sass webpack --save-dev
文件目录
main.js /map.js
//main.js vue 入口
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
//map.js vue 入口 我用来测试多入口和检测es6语法打包问题
const promise = new Promise(function(resolve, reject) {
console.log("我是es6")
});
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>demo-vue</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
webpack 配置打包，暂时优化什么都没加，后期会一点加上
// __dirname 代表当前目录，nodejs 会自动识别
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin } = require('vue-loader')
module.exports = {
entry:{//入口文件
bundle:__dirname + "/src/main.js",
admin:__dirname + "/src/map.js"
},
output:{ //输出文件
path: __dirname + '/dist',//输出文件路径
filename: '[name].[contentHash:8].js',//输出文件名
clean:true //是否清除
},
resolve:{
extensions:['.vue','.js','.json'],//引入这些文件 可以不带后缀 按顺序解析
alias:{
'@':__dirname+'/src', //@方式引入资源
}
},
devServer: {
port: 9999,
open:"http://localhost:" + 9999,//打开指定窗口
// proxy: {
// "/api": {
// target: "",
// secure: true, // 如果是https接口，需要配置这个参数
// changeOrigin: true,
// pathRewrite: { "^/finchinaAPP": "" },
// },
// },
},
//loader 配置
module:{
rules:[
{
test: /\.vue$/,
use:[
'vue-loader'
]},
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
template:'./public/index.html',
// chunks:["bundle"], //选择需要引入的js 不配置全部引入
// minify: {
// removeAttributeQuotes: true, // 删除双引号
// collapseWhitespace: true // 折叠空行
// } // 打包时的压缩配置
}),
new HtmlWebpackPlugin({
filename:'admin.html',
template:'./public/index.html',
chunks:["admin"], //选择需要引入的js
// minify: {
// removeAttributeQuotes: true, // 删除双引号
// collapseWhitespace: true // 折叠空行
// } // 打包时的压缩配置
}),
new VueLoaderPlugin()
],
mode:'development'
}
配置命令打包 在package.json
"scripts": {
"dev": "webpack serve --open --progress --config webpack.config.js",
"build": "webpack --config webpack.config.js"
},
简单的框架打好了 。。。。
