webpack

[magicdawn]

webpack loaders

require("xxx") 感叹号!分隔, 类似流式处理

loader order

1. The file is read from filesystem , 读文件
2. options.module.preLoaders are applied , 使用 preLoaders
3. options.module.loaders are applied , 使用 loaders
4. loaders from request are applied , 使用 request ????
5. options.module.postLoaders are applied , 使用 postLoaders

如果是 ! 开头,不使用loaders
如果是 !! 开头,不使用 preLoaders,loaders,postLOaders
如果是 -! 开头,不使用 preLoaders,loaders

例如加载一个css文件
require("!style!css!./css/style.css")

开头的!不使用js默认的转换,就是加一个function wrapper,后面经过style,css,最后是文件名

[magicdawn]

configuration

output

output.publicPath

The output.path from the view of the JavaScript.

用来设置 __webpack_public_path__

externals

http://webpack.github.io/docs/configuration.html#externals

externals: {
  jquery: true, 
  react: 'React'
}

• true, the property name will be used, 就是说, jquery: true, 这个就是 module.exports = jquery, 会去引用 jquery 这个全局变量
• react: 'React', 会生成一个模块 module.exports = React, 然后 require('react') 的结果就是 global.React

在 val 里可以传一个 "[type] value"

resolve

resolve.extensions

要解析的文件名后缀

resolve.alias

http://webpack.github.io/docs/configuration.html#resolve-alias
对模块进行 alias, 重定向

resolve.root

包含模块的绝对路径...

resolve.modulesDirectories

默认 ['web_modules', 'node_modules']

module

module.loaders

loaders 比较重要

module.noParse

Don’t parse files matching.

devtool

• source-map: 生成的是 sourceMappingUrl 外链
• inline-source-map 内联 data url
• eval: 写了 sourceUrl = xxx
• eval-source-map: 写了 sourceMappingUrl data

[magicdawn]

idea

webpack 模仿 predator-kit (browserify) 分层

• predator-kit 是将 global 做bundle, 然后其他的去 external 这个bundle
• webpack 做global.XXX, 然后在page层不去 require, ESLint 做下 global 就好

[magicdawn]

plugins

DefinePlugin

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
  },
  TWO: '1 + 1',
  SOME_BOOLEAN: true
})

if(process.env.NODE_ENV !== 'production') {
  console.log('not in production')
}
console.log(process.env.NODE_ENV)

// TWO
console.log(TWO)

if(SOME_BOOLEAN) {
  console.log(SOME_BOOLEAN)
}

if (true) {
  console.log('not in production');
}
console.log(("development"));

// TWO
console.log((1 + 1));

if (true) {
  console.log((true));
}

看样子就是:
在 node 端, x = 'this_is_x', 就去将代码里面的 x 变量全部替换为 this_is_x

// before
x = 10

// after
this_is_x = 10

在 node 端, x = '"this_is_x"', 就去将代码里面的 x 变量全部替换为 "this_is_x"

// before
console.log(x);

// after
console.log("this_is_x");

ProvidePlugin

http://webpack.github.io/docs/list-of-plugins.html#provideplugin

就是说, 配了下面的 ProvidePlugin, 代码中可以直接用 $, 它会帮你设置 $ = require('jquery')

new webpack.ProvidePlugin({
    $: "jquery"
})

[magicdawn]

loaders

[magicdawn]

webpack bootstrap

使用 CommonsChunksPlugin 提取后

配置

• vendor -> lib.js
• app.js

结果

lib.js

结构为

(function(modules){
  // bootstrap 代码
})([
  // 一堆 module 定义
])

定义了一个全局函数 webpackJsonp

function webpackJsonp(chunkIds, moreModules) {
  // 1. 将 moreModules 合并至 moudles

  // 2. require 此chunk 的第一个 module, moduleId = 0
}

定义了 module 内部的 require -> __webpack_require__

• require.m 所有的 modules

• require.p = publicPath

• require.c 所有modules 的 cache

  require.c = installedModules = {
    [moduleId]: {
      exports: {},
      id: moduleId,
      loaded: true | false,
    }
  }

• require.e ensure 一个 chunk

[magicdawn]

hot

webpack-dev-server

• --hot 此 flag 将会添加 HotModuleReplacementPlugin

自动刷新

inline

使用 --inline flag, 将会添加 webpack-dev-server/client?http://<path>:<port>/ 到entry point

配合 --hot 使用, 还会自动添加 webpack/hot/dev-server 至 entry point

log信息

• [HMR] 是 webpack/hot/dev-server打印的
• [WDS] 是 webpack-dev-server/client 打印的

浏览路径

http://localhost:8080/

iframe

浏览路径

http://localhost:8080/webpack-dev-server/

Note

我自己测试没有用啊...

accurate

const devDefault = {
  // 等同于命令行中--history-api-fallback，支持刷新时router也能生效
  // historyApiFallback.index必须和output.publicPath一致
  historyApiFallback: {
    verbose: true,
    logger: console.log.bind(console),
    // 避免有点号的时候不重写
    disableDotRule: true,
    // index必须是全路径
    index: `${PUBLIC_PATH}/index.html`,
    rewrites: [
      {
        // api 不指向index.html
        from: /^.*\/api\//,
        to: function (context) {
          return context.parsedUrl.path;
        }
      }
    ]
  },
  hot: true,
  quiet: false,
  noInfo: false,
  inline: true,
  stats: {
    colors: true
  },
  disableHostCheck: true,
  watchContentBase: true,
  contentBase: path.resolve(BASE_PATH, 'src'),
  publicPath: PUBLIC_PATH
};

[magicdawn]

poi

awesome tool https://poi.js.org/#/home?id=tldr

• vuex / vue-router / less / less-loader 需要自己装
• 引入 vuex 报错, 由于代码是 eval 的, 无法修改 webpack 配置, 瞎的
  • 使用 poi.config.js webpack(config) 修改
  • vuex.Store(config) 不使用 new 调用的话, 会报 store._withCommit 错误, 手误导致的问题, 而且报错不明显

[magicdawn]

webpack-chain

https://github.com/mozilla-neutrino/webpack-chain/tree/v2

[magicdawn]

import()

v4, import() spec 没有 chunk 相关的配置, 需要使用 comment 来指定

• webpackChunkName: chunk 的名称, 可以使用 [index] / [request] 占位符
• webpackMode 模式
  • lazy: 在每一个 import 创建一个 separate chunk
  • eager: 与 lazy 相反, 不创建 chunk, import() 返回一个已 resolve 的 Promise
  • weak: 不进行 network load, 如果文件之前没有被加载, 则返回的 Promise 会 reject
  • lazy-once: 对于 import(some/dir/${language}')` 这样的, lazy-onece 只会创建一个 chunk