使用webpack搭建vue脚手架

最新推荐文章于 2023-07-10 20:46:31 发布

汤原儿

最新推荐文章于 2023-07-10 20:46:31 发布

阅读量323

点赞数 1

文章标签： webpack vue.js javascript 学习前端

本文链接：https://blog.csdn.net/m0_59537414/article/details/128177776

版权

使用webpack搭建vue脚手架

使用webpack搭建vue脚手架

使用webpack搭建vue脚手架

新建文件夹 webpack-vue
初始化npm项目

npm init -y

安装webpack工具

npm install webpack webpack-cli --save-dev

安装devServer

npm install --save-dev webpack-dev-server

package.json添加运行指令

"build": "webpack --mode production",
"serve": "webpack serve --mode development"

console.log("项目入口");

wepack配置文件webpack.config.js

const path = require("path")
module.exports={
   
    entry:"./src/main.js",
    output:{
   
        filename:"[name].bundle.js",
        path:path.resolve(__dirname, "dist")
    }
}

新建html页面加载bundle,路径dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content