学习记录
20201209
- 完成webpack.config.js简单配置
- 使用webpack-dev-server
- 如果使用了webpack-dev-server,所有产出的文件都会写到内存里,而不是写入到磁盘上
- 自己实现了一套memoryfs模块把文件写到了内存里面
- 了解了loader的使用方法
- 多入口和单入口的区别以及output filename的变量以及变量的含义及用法(
[name]
[hash:8]
[contenthash]
[chunkhash]
)- 多入口的意思就是打包生成多个代码块,entry的值可以是入口文件,也可以是数组
- htmlwebpackplugin插件的使用
- hash值的作用和不同hash值的区别
- hash值的作用是为了缓存结果,因为浏览器是根据资源的url地址来缓存资源的,如果数据发生变化hash值也会跟着变化,这样就可以避免缓存旧文件
- hash代表本次编译的结果,所有产出的资源hash都一样,只要有一个入口文件变化那么chunk就会变化
- chunkhash表示代码块chunk的hash,一般来说每个entry都会产出一个chunk
- contenthash表示文件的内容hash,文件内容不变那么contenthash就不会变
- 引入图片
- file-loader url-loader
- file-loader的作用就是把文件拷贝到output中,然后改个名字把路径返回
- url-loader内置了file-loader,它会判断文件的大小,如果小于限制的话会变成base64.
- 在css中引入图片,使用的是css-loader,如果css文件里面有图片的话也会使用file-loader或者url-loader
20201210
- 分离css
- 因为css的下载和js可以并行处理,如果css太大的话我们可以抽取出来使其并行下载
- 使用mini-css-extract-plugin来分离css到单独的文件中
- 压缩css和js
- terser-webpack-plugin用来压缩js
- optimize-css-assets-webpack-plugin 用来压缩css
20201212
- 使用less 和 sass
20201213
- 转译es6/es7: babel-loader(webpack loader) @babel/core(核心) @babel/preset-env(预设,将es6 es7转成es5) @babel/preset-react
- 预设的意思就是将插件打包,成为一个预设,如果不这样做的话那么在babel-loader的options里的plugins里面一个个写很麻烦.
- loader的参数既可以写在webpack.config.js里面,也可以写.xxxrc,也可以写在package.json里面
- devtool
- eval
- module能看到编译前的代码,比如babel转译前的代码,
- #sourceURLXXX这个是浏览器来识别的
- 打包第三方类库
- 使用providePlugin这个插件可以无需使用import或者require来声明,直接使用.不过这是向当前模块注入的局部变量,不能全局使用
- 如果我们想向全局注入一个对象的话需要expose-loader,这个包的作用是之后可以在控制台用全局变量打印依赖
- externals可以让我们引用一个库但是又不让webpack打包,并且又不影响我们在程序中以amd cmd 全局引用方式来进行使用
- 在模板html中使用script来将模块引入
- 在externals中配置
- 使用html-wepack-externals-plugin来实现外链plugin,就不用自己写externals和在html中写cdn了
- 代理服务器
- webpack.config.js里面有一个devServer属性
- resolve 定制模块的查找规则
- resolveLoader是用来查找loader的,如果自定义了loader那么就可以使用这个字段来告诉webpack去哪里查找自定义的loader
- module.noPase告诉webpack哪些模块是不用解析的,如果有些模块是没有依赖的就可以使用这个属性
- DefinePlugin是用来将config里面的键值对挂载到全局变量上
- 区分环境变量
- 用mode来区分开发环境和线上环境
- 在package.json的scripts里面不同命令指定不同的环境参数,而不是在webpack.config.js里面硬编码mode
- 用mode来区分开发环境和线上环境
- 拆分webpack配置 在scripts里面通过 --config xxx.js 用来指定config文件
- base
- dev
- prod
- MPA 多入口应用
- 用glob匹配所有出来所有的entries,将entries循环放入数组中
- 根据entries生成htmlWebpackPlugins