webpack-api篇

简介

本文主要是介绍webpack的api，具体的怎么配合使用不在本文中涉及

webpack的API

需要在项目的根目录下创建一个webpackconfig.js文件，这个文件是webpack的默认配置文件
默认导出一个配置对象 ，导出遵循CommonJS规范

1、mode

	mode有三个选项，none（不做任何操作），production(生产环境)，development(开发环境)

2、entry入口配置

3、 output 出口配置,filename: "bundle.js", //输出的为文件名,path: path.join(__dirname, 'dist'), //输出目录

	publicPath: "./", //公共文件路径
	
4、devtool,相当于开发调试工具
	
	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 进行简化，然后再次生成的。
	
5、module:

	辅助模块可以使用不同的loader来处理相应的文件，例如使用ES6语法就要使用babel-loader，
	
	处理css文件就要使用css-loader和style-loader，需要注意的是执行顺序是从后往前执行的,
	最后的loader最先执行这点需要注意
	
	处理图片就要用file-loader

6、devServe 本地服务器

	可以开启本地服务器以及热替换 代码如下,open:true,hot:true,port:8080,
	
7、resolve:解析模块的规则

	(1)、resolve.alias，
    resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径
    
    (2)、extensions
    配置省略文件路径的后缀名
    
    (3)modules
    resolve.modules 配置 Webpack 去哪些目录下寻找第三方模块，默认是只会去 node_modules 目录下寻找。
    可指定目录，提升速度，默认就是 modules: [“node_modules”]，一般可不写
    
8、plugins: 插件
     plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建相关关的事情。
     plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，
     plugin需要的参数通过构造函数传入。
     
     使用plugin的难点在于plugin本身的配置项，而不是如何在webpack中引入plugin，
     几乎所有webpack无法直接实现的功能，都能找到开源的plugin去解决，我们要做的就是去找更据自己的需要找出相应的plugin。

谢谢观看