解除了一下webpack。以前就想接触一下,不过并没有他们说的那么简单。
撕逼乎上有人说,这就是前端的人不懂后端,所以webpack根本玩不明白。这东西就和makefile一样一样的之乎者也。
昨天总算弄懂了。其实还是makefile比较直观 = = 虽然我每次都要看一下makefile的说明才能写得出来XD

1.如何在网页中调用bundle文件中的函数

很简单,就是把那个函数全域化。[1][2]

1
2
3
4
5
function fn1() {}  
var fn2 = () => {console.log();};  

window.fn1 = fn1  
global.fn2 = fn2  

是不是有点太简单?
在webpack中,global会被自动转换成window。
我之前思考的是另一个问题。
这个东西会不会不安全?
因为我还蛮想用export这个东西的XD

不过在[2]中的看到了好多种方法,想了想,还是选择了最简单的这个window

2.补记:简单的webpack设定示例

2018/09/16补记:

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    a: './js/a/a.js',
    b: './js/b/b.js',
    c: './js/c/c.js',
  },
  output: {
    path: __dirname + '/js/bundle',
    filename: 'bundle_[name].js'
  }
};

[1]webpackでTypeScriptからコンパイルしたJavaScriptの関数をうまく呼び出せない。
[2]Define global variable with webpack
[3]webpack v4.19.0 concepts Entry Points
[4]webpack v4.19.0 concepts Output


creativ common license