# Webpack V4

# Webpack

# External Limitations

指定外部依赖的限制，并没有完全消除外部第三方库的打包时的引入

import A from 'library/one';
import B from 'library/two';

这种引入方式即使指定了externals也没有用

externals: ['library']

只能单独的一个一个的声明指定

externals: [
  'library/one',
  'library/two',
  // Everything that starts with "library/"
  /^library\/.+$/
]

# library

ES2015 module: import webpackNumbers from 'webpack-numbers'. CommonJS module: require('webpack-numbers') Global variable when included through script tag.

libraryTarget:

Variable: as a global variable made available by a script tag (libraryTarget:'var').
This: available through the this object (libraryTarget:'this').
Window: available trough the window object, in the browser (libraryTarget:'window').
UMD: available after AMD or CommonJS require (libraryTarget:'umd').

If library is set and libraryTarget is not, libraryTarget defaults to var

Variable: window.webpackNumbers
This: this.webpackNumbers=function(){}
Window: window.webpackNumbers=function(){}
UMD: exports.webpackNumbers

"libraryTarget": {
    "description": "Type of library",
    "enum": [
      "var",
      "assign",
      "this",
      "window",
      "self",
      "global",
      "commonjs",
      "commonjs2",
      "commonjs-module",
      "amd",
      "umd",
      "umd2",
      "jsonp"
    ]
  },

具体的实例理解：如果要使用webpack build这么文件入口

export default from './FinxDriver';

设置不同的libraryTarget结果如下：

import FinxDrive from '../../dist/bundle';
console.log(FinxDrive);

var: 默认的 =>

{}


this: 默认的 =>
```js
Cannot set property 'default' of undefined

window: =>

{}

commonjs: =>

{ default: ƒ a(), __proto__: Object }

commonjs2: =>

ƒ a() {
    return r.default.createElement("div", {
      className: "app-driver"
    }, r.default.createElement("div", {
      className: "app-driver__title"
}, ...

commonjs-module: =>

ƒ a() {
    return r.default.createElement("div", {
      className: "app-driver"
    }, r.default.createElement("div", {
      className: "app-driver__title"
}, ...

amd: =>

ƒ a() {
    return r.default.createElement("div", {
      className: "app-driver"
    }, r.default.createElement("div", {
      className: "app-driver__title"
}, ...

umd: =>

ƒ a() {
    return r.default.createElement("div", {
      className: "app-driver"
    }, r.default.createElement("div", {
      className: "app-driver__title"
}, ...

# 学习资料

# 参考资料

文档：

官网：https://webpack.js.org/
中文文档：https://doc.webpack-china.org/

文章：

WebPack实例与前端性能优化：https://segmentfault.com/a/1190000004577578
WEBPACK DEV SERVER：http://www.jianshu.com/p/b95bbcfc590d
http://www.infoq.com/cn/articles/react-and-webpack/
https://rhadow.github.io/2015/05/30/webpack-loaders-and-plugins/

代码：阮一峰webpack-demo：https://github.com/ruanyf/webpack-demos

库：自己实现的：https://github.com/sialvsic/webpack-demo

← Webpack Webpack-HMR →