管理输出步骤
Step1:在src新建文件print.js添加逻辑
Step2:在src/index.js import 引用新添加的逻辑
Step3:更新dist/index.html文件,修改引入的文件(引入的JS文件)
Step4:对应修改webpack/.config.js配置文件(entry和output)
Step5:执行npm prun build
src/print.js
export default function printMe() { console.log('I get called from print.js!'); }
src/index.js
import _ from 'lodash'; + import printMe from './print.js'; function component() { var element = document.createElement('div'); + var btn = document.createElement('button'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); + btn.innerHTML = 'Click me and check the console!'; + btn.onclick = printMe; + + element.appendChild(btn); return element; } document.body.appendChild(component());
dist/index.html
<!doctype html>
<html>
<head>
- <title>Asset Management</title>
+ <title>Output Management</title>
+ <script src="./print.bundle.js"></script>
</head>
<body>
- <script src="./bundle.js"></script>
+ <script src="./app.bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
- entry: './src/index.js',
+ entry: {
+ app: './src/index.js',
+ print: './src/print.js'
+ },
output: {
- filename: 'bundle.js',
+ filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};