前言
什么是webpack？
webpack是一个静态模块打包器，当webpack处理应用程序时，它递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
安装
npm install webpack -g
npm install webpack-cli -g
安装成功：
配置
创建webpack.config.js配置文件
- entry：入口文件，指定webpack用哪个文件作为项目的入口
- output：输出，指定webpack把处理完成的文件放置到指定路径
- module：模块，用于处理各种类型的文件
- plugins：插件，如：热更新、代码重用等
- resolve：设置路径指向
- watch：监听，用于设置文件改动后直接打包
使用
新建一个项目
新建一个文件夹，然后用IDEA打开
创建一个名为Modules的目录
用于放置JS模块等资源文件
创建js文件
我们先创建一个hello.js文件，用于暴露一个方法，这类似于创建一个对象。
//暴露一个方法
exports.sayHi = function () {
document.write("<h1>菜菜</h1>");
};
我们再创建一个main.js，用于输出我们的对象。
var hello = require("./hello");
hello.sayHi();
这里我们用require把hello.js引入，然后放入一个hello的对象，再输入对象里面的方法。
webpack.config.js（重点）
该文件是webpack的配置文件
module.exports = {
entry: './modules/main.js',
output: {
filename: "./js/bundle.js"
}
};
这里我们引入js文件，并确定好输出的路径和名字
webpack打包
在IDEA的命令行中输入webpack 进行打包。
然后会生成一个dist文件夹
里面生成的bundle.js就是我们的压缩文件
如果失败，就以管理员身份进入cmd命令行，进入文件夹目录使用webpack命令即可
展示
我们创建一个index.html文件，引入bundle.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
用浏览器打开：
我们也可以使用以下命令来进行监听：
webpack --watch
结论
无论你的项目多么复杂，最后用webpack进行打包，输入的js文件，引入前端显示即可，所以vue都是把它模块化，都是一个个js文件、vue文件，最后用几个页面显示出来，这就是前端的模块化开发。
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
