深入浅出 Webpack【阅读总结】章节二

前言 - 阅读《深入浅出webpack》一书实践记录二

目录

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Output：出口，输入结果。
• Module：模块，Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Resolve: 模块如何被解析
• Externals：优化性能，不打包某些依赖模块儿
• Devserver: 热更新，配置服务ip ，端口等

核心概念

Webpack 启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。

Entry

可配置 多页面应用 或者 多入口的单页应用，以下是几种配置方式，entry：后边可以动态配置，接受一个函数或者一个promise

module.exports  = {
  entry: './main.js'   // string 类型
};
module.exports  = {
  entry: ['./main.js', './main2.js']   
  // array 类型  数组里的最后一个入口文件的模块会被导出。
};
module.exports  = {
  entry: { 
      demo1:  './entry/demo1.js',
      demo2:  './entry/demo2.js',
      // object 类型
  } 
};

Output

配置出口的地方，常用的属性配置，我们常用到 filename，path，publicPth

filename ： string 类型，出口文件暱称，导出单个文件可以写死 filename: "./main.js" ，导出多个文件就得使用内置变量了filename: "[name].js", 这里的name表示用内置变量name (filename: "[name].js")，webpack会为每一个chunk`取一个内置名称。

path： 通过node的path模块儿去获取绝对路径__dirname，后边是字符串就是出口文件目录配置

publicPath：表示打包后的静态资源引用的路径前缀，如：publicPath: "a/b"，则打包后的引用静态资源路径为 http://www.XXX.com/a/b/静态资源文件。

module.exports = {
	output: {
	    filename: "",  // string 类型，出口文件暱称
	    chunkFilename: ""， // string  需要在runtime根据chunk发送的请求去生成
	    path: path.resolve(__dirname, 'dist'), // 生成出口文件目录
		publicPath: ""， // 静态资源的路径。 需要按照开发环境或者生产环境配置
	    library：""， // string 导出库的名称 
	    libraryTarget: "",  //  以何种方式导出库
	    libraryExport: "", // string, array 导出那些子模块
    }
}

内置变量

注： Hash的长度是可以指定的如：[hash:8] ，默认20，其他配置项 在官方文档中有介绍或者后续的笔记中更新。

Module

Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。等于是配置处理模块儿的规则。常用 noParse，rules

noParse：提高webpack性能优化，忽略部分文件的解析和处理( 被忽略的文件不该包含import, require, define)，如 jquery 本身就不会模块化，就不需要解析和处理，直接省略跳过。

rules： 配置Loader , 我们在章节一已经分享过了 GO章节一，当然了这个配置项是很重要的，章节一质检单介绍了 loader的基础配置 test 和 use，这里又扩展了几个，如：enforce，include，exclude 。

module.exports  = {
	module: {
	    parser: {  // 指定解析器的开关, 精确控制哪些语法可以被解析
	       amd: false, // 禁用AMD
	       commonjs: true, // 禁用CommonJs
	       ...
	    },
	    noParse: /jquery/ ,  // 忽略部分文件的解析和处理( 被忽略的文件不该包含import, require, define)
	    rules: [  // 配置Loader , 我们在章节一已经分享过了
	      {
	        test: /\.css/,   //  正则表达式的匹配规则， 也可是个array
	        use: [],  // 数组中可以是string， object
	        enforce: "pre", // enum  ["pre", "post"]  配置loder 的执行顺序
	        // post 将loader 的执行顺序放在最后
	        // pre 将loader 的执行顺序放在最前边 
	        
	        include: path.resolve(__dirname, 'src'), // 只匹配src目录中的文件，接受数组
	        exclude: path.resolve(__dirname, 'dist'), // 排除dist目录中的文件,接受数组, 例子如下：
	        // include: [path.resolve(__dirname, 'src'),path.resolve(__dirname, 'src2')]

	      }
	    ]
	}
}

Resolve

模块如何被解析， （webpack本身含有默认值），常用 alias，extensions

alias：创建别名，避免过多的相对路径，在开发中我们肯定会因为组件各种层级引用静态目录 ../ 的困扰，这是一种引用别名配置。方便开发，提升效率。

extensions： 引用文件or组件，当无后缀名时，默认自动带上后缀解析， import a from "a" , 没有后缀名会依次找a.js,a.json，找不到就报错；( extensions: [".js",".json"] 这样配置的话 )。所以建议平常引用文件或者组件带上后缀名，避免不需要的解析。

module.exports = {
	resolve: {
	   alias: { // 创建别名。 使引用是更方便，避免过多的相对路径
	      images: path.resolve(__dirname, 'src/images/') 
	      css$: path.resolve(__dirname, 'src/assets/css')  // $ 标识精准匹配
	    },
	    extensions: [".js",".json"], // 当无后缀名时，默认自动带上后缀解析
	    mainFiles: [], // 指定导入模块时 导入的哪部分代码
	    modules: ["node_modules"], // 默认只去node_modules中寻找第三方模块
	    enforceExtension: false, // 允许无扩展名文件的引用
	    unsafeCache: /\aa/, // 开启仅缓存aa模块  regex, array, boolean
	    plugins: [],  // 额外的解析插件列表
	}
}

Externals

打包体积过大，不打包某些插件源码模块儿到文件里。

module.exports = {
	externals: {
	    jquery: 'jQuery'  //  string, array. object, function, regex
	}
}

Devserver

常用 host，port，open，proxy 这个配置就多了，后期我们会有一个基本的实战分享，请持续关注。

module.exports = {
	devServer: {
	   host: "", // 默认为localhost， 设置为ip 供外部访问
	   port: "", // 监听的端口， 默认8080
	   inline: true,  // false 时 责启用iframe模式， true为嵌入bundle中
	   allowedHosts: [], // 设置白名单
	   compress: true, //  启用gzip压缩
	   contentBase: path.join(__dirname, "public"), // 从哪提取静态文件, 默认当前执行的目录 ./
	   disableHostCheck: false,  // 关闭host检查，使其他设备也能访问本地服务
	   lazy: true, // 开启惰性模式，仅在请求时编译，即不监听文件改动
	   filename: "", // 只在请求该文件时编译， 必须开启惰性模式
	   headers: {},  // 在所有想用中添加首部内容
	   hot: true, // 开启模块热替换，仅刷新改变的模块
	   clientLogLevel: "info",  // enum 客户端的日志级别，默认info
	   https: true, // 默认使用http服务，开启https 后自动生成一份证书，也可用{}配置自己的证书,读文件
	   open: true,  // 第一次构建后 自动打开浏览器
	   proxy: { // 代理
	     "/api":  "http://localhost:3000",
	     "/users": {
	       target: "https://localhost:3000",
	       pathRewrite: {"^/users" : ""},  // 将路径重写 如 /users/login -> /login
	       secure: false, // 若代理到https服务，则需要将secure设为false
	       bypass: function(req, res, proxyOptions) {
	         if (req.headers.accept.indexOf("html") !== -1) {
	           console.log("Skipping proxy for browser request.");
	           return "/index.html";
	         }
	       }
	     }
	   },
	   quiet:  true, // 除初始启动信息外都不会打印到控制台
	 }
}

截至到这里，webpack大部分属性配置等，都有了简单的介绍和认识，后边我将带领大家一起去实践。