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

时间 2019-11-11

标签手动搭建 vue 前奏 webpack 项目繁體版

原文原文链接

手动搭建vue项目css

搭建vue前首先搭建webpack项目

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

// 建立项目根目录
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)vue

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
    <script src="./src/js/bundle.js"></script>
</html>

(src/assets/js/main.js)node

(function(){
    const promise = new Promise((resolve,reject) =>{
        resolve('hello webpack project')
    })
    promise.then(res =>{
        console.log(res);
    })
})();

修改package.json中scripts字段webpack

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

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

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:8080npm

npm run dev

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

json

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