webpack构建01-vue项目之 手动webpack打包
- 新建一个文件目录
webpack-vue - webpack-vue / index.html、 webpack-vue / src、webpack-vue / dist、webpack-vue / src / main.js、webpack-vue / src / person.js
- 目录如下
- 目录解释
- index.html html的根目录
- src 源代码
- main.js js的入口文件
- person.js 模块化的导出导入测试
- dist 打包后的代码
main.js
console.log("main");
import {age} from "./person"
console.log("age",age);
person.js
export const age = 10
webpack 手动打包指令
- 注意点：webpack4以上 需要加 -o （ webpack -version 查看webpack版本）
webpack ./src/main.js -o ./dist/bundle.js
index.html
- 注意点：bundle.js 是经过webpack打包生成的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
index.html 效果
