[web] webpack (2)

概念

webpack的几个运行参数

--colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
--profile 输出性能数据，可以看到每一步的耗时
--display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

webpack资源打包规则

• 对于单入口文件，每个入口文件把自己所依赖的资源全部打包到一起，即使一个资源循环加载的话，也只会打包一份
• 对于多入口文件的情况，分别独立执行单个入口的情况，每个入口文件各不相干

extensions

省略引用文件的扩展名

resolve: {
	extensions: ['', '.js', '.jsx']
}

alias

设定路径别名

resolve: {
	alias: {
		components: path.join(__dirname, './src/components')
	}
}

noParse

webpack 将不再扫描这个文件中的依赖

  module: {
    noParse: [/moment-with-locales/]
  }

externals

使用 externals 声明一个外部依赖。
Webpack 可以配置 externals 来将依赖的库指向全局变量，从而不再打包这个库

  externals: {
    moment: true
  }
  
  //直接在html中引入moment

source map

模式：

eval
每个模块都封装到 eval 包裹起来，并在后面添加 //# sourceURL 。

source-map
最原始的 source-map 实现方式，
其实现是打包代码同时创建一个新的 sourcemap 文件，
并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿。

hidden-source-map
soucremap 但没注释，只能靠后缀，
譬如 xxx/bundle.js 文件，
某些引擎会尝试去找 xxx/bundle.js.map 。

inline-source-map
为每一个文件添加 sourcemap 的 DataUrl，
注意这里的文件是打包前的每一个文件而不是最后打包出来的，
同时这个 DataUrl 是包含一个文件完整 souremap 信息的 Base64 格式化后的字符串，
而不是一个 url。

eval-source-map
把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrl 。

cheap-source-map
不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）

cheap-module-source-map
不包含列信息，
同时 loader 的 sourcemap 也被简化为只包含对应行的。
最终的 sourcemap 只有一份，
它是 webpack 对 loader 生成的 sourcemap 进行简化，
然后再次生成的。

webpack 不仅支持这 7 种，它们还可以任意组合的，
例如可以设置 souremap 选项为 cheap-module-inline-source-map。