使用webpack创建vue项目_html-js-css

创建空文件夹

文件夹下执行：npm init

安装 webpack webpack-dev-server vue vue-loader

 npm i webpack-dev-server vue vue-loader

创建目录结构

main.js 中添加代码

//main.js
import {createApp} from "vue";
import App from './app'
const app = createApp(App)
app.mount('#app')

在index.html中添加代码

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

webpack.config.js 中添加代码

const path = require('path');
const {VueLoaderPlugin} = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode:'development',
    devtool:'source-map',
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'main.js'
    },
    watch: true,
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({template:'./public/index.html'}), //JS或者CSS文件可以自动引入到html中
    ],
    resolve: {
        extensions:['.js','.css','.vue'],  //配置后缀名
    },
    devServer: {
        port:8080,
        hot:true,
        open:true,
        static: {
            directory: path.join(__dirname, './'),
            watch: true
        }
    }

}

安装插件

 npm install html-webpack-plugin

package.json中scripts添加

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },

终端运行

 npm run start

打开网页：http://localhost:8080/

修改app.vue可同步显示在网页上

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/939597.html

使用webpack创建vue项目

发表评论

评论列表（0条）