7.模块化开发笔记（主要webpack）

本文为拉勾网大前端高薪训练营第一期心得和笔记

---

学习心得

前端学习背景

经过这段时间拉勾网大前端高薪训练营的学习，进步还是挺明显的，主要是前端这个行业细节太丰富，经常是用到什么查什么，并没法系统地学习前端，自己琢磨会遗漏很多细节，还有很多小技巧和好用的工具也是会错过的。

课程和视频

拉勾网的大前端训练营的视频讲解很详细，视频分成很多小节，每个视频平均5分钟左右，少数复杂的15分钟，比较方便碎片时间学习，当然还是比较推荐边学边记笔记，不然学完就忘了。学习计划也是循序渐进，不过还是需要有些前端基础学习效果最好。视频的代码也会在代码库里更新，节省了自己敲打的时间，视频也是2年有效，随时可以回来翻看。每一个小章节后有问卷作业，每一个大章节后有一次问答题和代码题的作业，每一个大章节之后会有一次串讲的直播，赶不上可以看录播，总的来说学习体验还是挺好的。

班主任

班主任很尽责，会通知大家直播时间（催促大家写作业，笑），学起来挺有紧迫感的（杜绝了steam买游戏不玩的，买了教程不学的情况），另外有两个微信群（摸鱼和学习），班主任经常在摸鱼群里发励志文章和表情包，鼓励大家努力学习:D。

答疑和导师

有什么疑问可以问老师和同学，包括讲课的老师和批改作业的老师都在微信群里，很方便。
答疑不仅是课程里，也可以是工作学习中遇到的问题，这相当于还增进了人脉，一举两得。说不准学完了得到个内推什么的，那就更赚了。

---

笔记

script type=‘module’

自动严格模式

单独私有作用域

通过CORS的方式请求外部JS模块，且必须http这种形式，不能通过文件

等同于defer，延迟执行脚本

import export

es module import和export都可以用as重命名

import和export是传引用（变量地址），而不是传值

import的不能改，是const的

import a from 'a.js’不能省略.js

import b from ‘./b/index.js’ 不能省略index.js

import 'modules.js’会认为是外部模块

'./modules.js‘ 
'/04-import/modules.js' 
'http://localhost:3001/04-import/modules.js'
等效

动态加载模块

import(importPath).then((module)=>{
	console.log(module)
})

script nomodule，只有在不支持module的浏览器才运行脚本，可以用来阻止Polyfill在支持module的浏览器里执行第二次脚本

nodejs ES module

nodejs支持module，需要后缀改成mjs，执行时

node --experimental-modules index.mjs

ESModule这种方式，系统api支持import {writeFileSync} from ‘fs’，lodash这种第三方的不支持这样使用

• esm可以导入commjs模块
• commonjs只能导出一个默认成员
• import不是解构导出对象
• commonjs不能导入ESM模块

ESM里不能使用require module exports __filename __dirname这些commonjs内置的模块

替代做法

// 通过 url 模块的 fileURLToPath 方法转换为路径
import { fileURLToPath } from 'url'
import { dirname } from 'path'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
console.log(__filename)
console.log(__dirname)

type module

node 12.10版本可以在package.json里增加"type": “module”

此时commonjs的文件需要改成cjs后缀

babel转换

babel-node index.js --presets=@babel/preset-env
//或者创建.babelrc
{
	"presets": ["@babel/preset-env"]
}

//或者选择只用某个插件
{
	"plugins": [
		"@babel/plugin-transform-modules-commonjs"
	]
}

webpack

好文章收藏

https://segmentfault.com/a/1190000019890322

https://blog.csdn.net/qq_36380426/article/details/106894870

初步认识

webpack4 零配置的话会打包src/index.js到dist/main.js

三种mode production development none

小技巧vs code: cmd+k cmd+0折叠所有代码

rules里的use里的loader执行顺序是从后向前

config里的publicPath告诉webpack文件路径

config里limit可以指定文件大小是否使用loader limit: 10*1024就是10KB

资源加载支持

• ES Module标准的import声明
• CommonJS标准的require函数
• AMD标准的的define函数和require函数
• 样式代码中的@import指令和url函数 @import url(test.css);
• html里图片标签的src，想增加的话可以如下

{
	test: /.html$/,
	use: {
		loader: 'html-loader'
		options: {
			attrs: ['img:src', 'a:href']
		}
	}
}

自己写loader

const marked = require('marked')

module.exports = source => {
  // console.log(source)
  // return 'console.log("hello ~")'
  const html = marked(source)
  // return html
  // return `module.exports = "${html}"`
  // return `export default ${JSO