管理输出步骤
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') } };