webpack管理输出

1.新建src/print.js,分别修改代码如下,然后执行命令 npm run build ，这之后可以在dist文件夹下看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，和在 index.html 文件中指定的文件名称相对应。在浏览器中打开 index.html，查看点击按钮时会发生什么。

print.js
export default function printMe() {
    console.log('这段来自print.js!');
  }
index.js
import _ from 'lodash';
import print from './print.js';
function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    btn.innerHTML = '点击!';
    btn.onclick = print;
    element.appendChild(btn);
    return element;
  }
  
  document.body.appendChild(component());

const path = require('path');
webpack.config.js
module.exports = {
  entry: {//入口文件
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {//输出文件
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

View Code