webpack学习2 | 青训笔记

这是我参与「第四届青训营 」笔记创作活动的第11天 上次的笔记只记录了部分，这次再补上

生成HTML

1.安装依赖

2.编写配置

3.npx webpack

4.结果如下

执行后生成两个文件， 可以生产html文件意味着html就已经可以自动维护了

工具线

HMR

hot module replacement - 模块热替换 类似于liveserve

1.开启HMR 再配置中加入 devServer hot

2.启动webpack 通过 npx webpack serve命令

Tree-Shaking

删除在打包过程中，没有被用到的，代码执行结果不会被用到的，代码只读不写的东西。让打包出来的内容 更加精炼

开启tree-shaking：

module.export = {
    ...
    mode:"production",
    optimization:{
        useExports:true,
    },
    ...
}

改变了mode 加入了新的optimization

理解Loader

为了处理非标准JS资源，设计出资源翻译模块---Loader。用于将资源翻译为标准JS（将非js资源转化为js资源）

webpack只认识js代码，例如css/less/sass。当引入css，没有loader时，会报错，内容为无法解析代码，请添加相关loader。

加入loader包，添加相关配置。

loader链式调用

以less为例

1. less-loader :实现less => css的转换
   2.css-loader:将CSS包装成类似module.exports = "s(css]”的内容，包装后的内容符合JavaScript语法
   3.style-loader : 将css模块包进require语句，并在运行时调用injectStyle(运行时，将代码插入html)等函数将内容注入到页面的style标签

第一个loader运行的结果可能是第二个loader的输入 --- 链式调用 特点：

• 链式执行
• 支持异步执行
• 分normal，pitch两种模式

loader的编写

基础模板

module.exports = function(source,sourceMap?,data?){
   //source 为 loader 的输入
   //也可能是文件内容，也可能是上一个loader处理的结果
   return source
}