webpack5+vue3环境搭建/附自动化脚本(一键生成)

最新推荐文章于 2024-09-12 16:09:28 发布

半夜追风人

最新推荐文章于 2024-09-12 16:09:28 发布

阅读量879

点赞数 4

分类专栏：前端文章标签： vue webpack

本文链接：https://blog.csdn.net/m0_46439976/article/details/119715620

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

注意：自动化脚本在最后，如果不想手动搭建，可直接执行自动化脚本

方案一：手动搭建
0.本案例目录如下
在这里插入图片描述

1.安装webpack webpack-cli

npm install webpack webpack-cli --save-dev

2.编写webpack.config.js配置文件

const path=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    mode:'development',
    output:{
        filename:'js/[name].js',
        path:path.join(__dirname,'/dist'),
        clean:true
    },
    resolve:{

    },
    module:{
        rules: [
            {
                test: /\.vue$/,
                loader: '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:'./index.html'
        }),
        new VueLoaderPlugin()
    ],
    devtool:'source-map'
}

3.编写.vue组件和html-webpack-plugin所需要的模板文件
3.1.App.vue如下：

<template>
  <h1>我是APP</h1>
</template>

<script>
export default {
  name: "App"
}
</script>

<style scoped lang="scss">
  h1{
    background: #aabb11;
  }
</style>

3.2.模板文件index.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

4.编写index.js（入口文件）并导入组件

import { createApp } from 'vue'
import App from "./../components/App.vue";

createApp(App).mount('#app')

5.安装vue3，vue3加载器（），vue3模板解析器，html-webpack-plugin,
css-loader,style-loader以及sass-loader

npm install vue@next
npm install -d vue-loader@next
npm install -D @vue/compiler-sfc
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

6.执行打包命令

 webpack --config webpack.config.js

7.打开dist/src/index.html即可看到结果

方案二：自动化配置
自动化脚本如下；可直接复制粘贴运行；

const execSync = require('child_process').execSync;
const path=require('path')
const fs=require('fs')

//1.初始化package.json
function init(){
    execSync('npm init -y');
    console.log("1.初始化package.json成功")
}

//2.建立目录结构
function createDirect(){
    fs.mkdirSync("./src");
    fs.mkdirSync("./src/components");
    fs.mkdirSync("./src/css");
    fs.mkdirSync("./src/images");
    fs.mkdirSync("./src/js");
    console.log("2.目录创建成功")
}
//3.下载相关资源
async function downloadFile(){
    console.log("3.依赖正在下载...请耐心等待")

    let order= `npm install webpack webpack-cli --save-dev  && npm install vue@next && npm install -d vue-loader@next && npm install -D @vue/compiler-sfc && 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`
    return await new Promise(function (resolve, reject){
         require('child_process').exec(order,function (err){
            if (err){
                console.log(" 依赖下载错误");
                reject(err)
            }else {
                resolve("success")
                console.log("  依赖下载完毕")
            }
        })
    })


}

//4.新建webpack.config.js
const config=`const path=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    mode:'development',
    output:{
        filename:'js/[name].js',
        path:path.join(__dirname,'/dist'),
        clean:true
    },
    resolve:{

    },
    module:{
        rules: [
            {
                test: /\\.vue$/,
                loader: '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:'./template.html'
        }),
        new VueLoaderPlugin()
    ],
    devtool:'source-map'
}`
async function createConfig(){
    console.log("4.正在注入配置文件")
    return await new Promise(((resolve, reject) => {
        fs.writeFile('./webpack.config.js', config, err => {
            if (err) {
                reject(err)
            }else {
                console.log("  配置文件注入成功")
                resolve('success')
            }

        })
    }))
}


//5.初始化相关文件
function createFile(){
    //入口js文件模板
let js_template=
`import { createApp } from 'vue'
import App from "./../components/App.vue"; 
createApp(App).mount('#app')`

//App.vue文件
let appVue_template=
`<template>
  <h1>我是APP</h1>
</template>

<script>
export default {
  name: "App"
}
</script>

<style scoped lang="scss">
  h1{
    background: #aabb11;
  }
</style>`

//template.html模板
let html_template=
`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>`

    fs.writeFileSync('./src/js/index.js',js_template)
    fs.writeFileSync('./src/components/App.vue',appVue_template)
    fs.writeFileSync('./template.html',html_template)
}



//7.执行以上自动化脚本
init()
createDirect()
downloadFile().then((data)=>{
   return  createConfig()
}).then(()=>{
    createFile()
}).catch((err)=>{
    throw new Error(err)
})