webpack使用
0.准备工作: 在项目目录下安装 webpack
cd myvue
npm install webpack -g
npm install webpack-cli -g1.新建项目
2.创建一个名为 modules 的目录，用于放置JS模块等资源
3.在 modules 下创建模块文件，如 hello.js， 用于编写 JS 相关代码
hello.js
//暴露一个方法
exports.sayHi=function () {
document.write("<div>allen</div>");
};4.在modules下创建一个名为 main.js 的文件，作为打包时的 entry
main.js
var hello = require("./hello");
hello.sayHi(); //调用hello.js中的方法5.在项目目录下创建 webpack.config.js 配置文件，使用 webpack 命令打包
webpack.config.js
module.exports={
entry: "./modules/main.js",
output: {
filename: "./js/bundle.js"
}
};在 idea 的终端(以管理员身份)输入
webpack
自动打包完成，此时在项目目录下会多出一个 js 文件夹。
6.在项目目录下创建 html 页面，如 index.html ,导入打包后的 js 文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>7.运行html查看效果
效果图输出：
allen
