使用webpack需要具备的条件:
1.电脑上安装了5.0.0以上的node.js
2.安装webpack,可以安装到某个项目(
npm i -D webpack
)也可以安装到全局(
npm i -g webpack
),顾名思义,安装到全局的话可以在任意地方使用webpack的可执行文件;
一个基本的webpack构建需要两个入口文件index.html、main.js,一个配置文件webpack.config.js,一个工具函数文件show.js
index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 webpack 输出的 JS 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>
main.js
// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');
show.js
// 操作 DOM 元素,把 content 显示到网页上
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通过 CommonJS 规范导出 show 函数
module.exports = show;
webpack.config.js
const path = require('path');
module.exports = {
// JS 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
}
};
项目结构是这样的,之后在项目根目录下直接执行webpack便成功打包自动生成一个可执行的js文件;
以上文件中使用到了es6(例如:const)
也使用到了commonJs(例如:使用了require来加载模块,也使用了exports和module.exports来暴露模块中的内容)
学习的源文章说也有用到amd的相关内容,但amd的学习太欠缺,后续理解了再补上吧;