webpack 手动搭建vue开发环境

望舒忘书

已于 2023-09-12 09:56:24 修改

阅读量239

点赞数

文章标签： webpack vue.js 前端

于 2023-07-24 14:32:57 首次发布

本文链接：https://blog.csdn.net/DragonOfMoon/article/details/131895508

版权

搭建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,
    }
}