一个html 文件中手动引入所有资源，然而随着应用程序增长，
并且一旦开始 使用多个js文件，如果继续手动管理 html 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
- |- print.js
|- /node_modules
src/print.js
export default function printMe() {
console.log(‘I get called from print.js!’);
}
src/index.js
import _ from ‘lodash’;
//导入js
-
import printMe from ‘./print.js’;
function component() {
var element = document.createElement(‘div’); -
var btn = document.createElement(‘button’);
element.innerHTML = _.join([‘Hello’, ‘webpack’], ’ ');
//创建按钮 -
btn.innerHTML = ‘点击这里，然后查看 console！’;
-
btn.onclick = printMe;//绑定点击事件
-
//添加到页面中
-
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
webpack.config.js
const path = require(‘path’);
module.exports = {
- entry: {//配置多个入口文件
-
app: './src/index.js', -
print: './src/print.js' - },
output: {
-
filename: 'bundle.js',
-
}filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist')
};
dist/index.html
<!doctype html>
+</body>