Webpack
本质上，webpack是一个现代JavaScript应用程序的静态模块打包器，它会递归的构建一个依赖关系图
ES6模块
EcmaScript6标准增加了JavaScript语言层面的模块体系定义，其核心思想就是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量，而以往的CommondJS和AMD模块，都只能在运行时确定这些东西。
优点：
- 容易进行静态分析
- 面向未来的EcmaScript标准
缺点：
- 原生浏览器还没有实现该标准
- 全新的命令，新版的NodeJS才支持
安装Webpack
WebPack是一个模块化加载的兼容打包工具，它能把各种资源都当做模块化处理
切换到项目目录
npm install webpack -g
npm install webpack-cli -g
使用Webpack
- 创建一个空文件夹，用idea打开
- 创建一个名为modules的目录，用于防止JS模块等资源文件
- 在modules下创建模块文件，例如hello.js，用于编写JS模块相关代码
//暴露一个方法
exports.sayHi = function () {
document.write("<h1>ES6</h1>");
}
- 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性
var hello = require("./hello");
hello.sayHi();
- 在项目根目录下创建webpack.config.js的配置文件，使用webpack命令打包
module.exports = {
entry: './modules/main.js',
output: {
filename: "./js/bundle.js"
}
}
- 在项目根目录下创建HTML页面，如index.html，导入webpack打包后的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 前端的模块化开发 -->
<script src="dist/js/bundle.js"></script>
</head>
<body>
</body>
</html>
说明：
# 参数 --watch 修改js之后，将自动打包，用于监听变化
webpack --watch
扫一扫
1490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
