目录结构如下：
|-- index.html
|-- main.js
|-- show.js
|-- webpack.config.js
index.html
这是部署后打开的入口文件，这里面只有一个标签，和引入的bundle.js。这里的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>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
show.js
这里使用ES6导出的方式，定义一个方法，给id为app的标签设置InnerHTML。
export const show = function(content) {
window.document.getElementById('app').innerHTML = 'Hello,' + content;
}
main.js
该文件引入上面文件定义的方法，并调用。
import { show } from './show';
show('webpack')
webpack.config.js
webpack的配置文件，这里配置了入口和出口。出口里定义了输出的文件名。
const path = require('path');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
}
};
执行webpack命令后，会出现一个dist文件夹，打开index.html,界面会出现Hello, webpack。到这里，webpack的基本使用流程就到此结束了。
文件目录结构
测试结果
总结
注意这里的核心就在webpack.config.js, 配置了入口出口，然后webpack根据配置对文件进行打包。目前的配置是最简单的，之后会不断的学习深入了解。
网友评论