手动搭建Vue之前奏:搭建webpack项目

时间：2022-08-08 14:26:15

手动搭建vue项目

  1. 搭建vue前首先搭建webpack项目

　　　　首先你应当安装一下npm以及nodejs
　　　　安装完成后,进行如下操作:

// 创建项目根目录

mkdir some_project_name

// 切换到项目目录下

cd some_project_name

// 初始化该项目

npm init -y

// 下载并安装webpack相关包

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

// 手动创建相关的文件夹 --mkdir 中使用 // 或 \

mkdir src\pages src\components src\assets\js src\assets\css src\assets\imgs src\assets\fonts dist build

// 手动创建相关文件 --touch 命令中可以使用 / .

touch index.html src/assets/js/main.js build/webpack.dev.conf.js build/webpack.base.conf.js build/webpack.prod.conf.js

利用IDE编写 index.html 以及 main.js
(index.html)

<!DOCTYPE html>

<html>

    <head></head>

    <body></body>

    <script src="./src/js/bundle.js"></script>

</html>

(src/assets/js/main.js)

(function(){

    const promise = new Promise((resolve,reject) =>{

        resolve('hello webpack project')

    })

    promise.then(res =>{

        console.log(res);

    })

})();

修改package.json中scripts字段

"scripts":{

    "dev":"webpack-dev-server --inline --progress --config ./build/webpack.dev.conf.js"

}

编写./build/webpack.dev.conf.js

const path = require('path');

module.exports = {

    entry: path.resolve(__dirname,'./src/assets/js/main.js'),

    output:{

        path: path.resolve(__dirname,'./dist'),

        filename: 'js/bundle.js'

    }

}

启动项目,并打开浏览器 localhost:8080

npm run dev

控制台如果出现了 'hello webpack project' 字样,说明webpack项目已经可以使用

后续补充 热启动等优化...

相关文章