webpack初体会

webpack本质上就是帮我们进行打包文件的一个压缩工具，它只能识别js文件，所以loader的出现，帮助我们去解决了这个问题。优化主要分为两方面：打包速度优化和体积优化。

webpack的几大分类

mode

这是确定代码的开发环境，有三种

string = 'production': 'none' | 'development' | 'production'，'development' | 'production'有不同的默认配置，development模式source-map好像默认为eval，production默认为none，具体忘了

devtool

这是决定source-map的类型，有26种，开发模式推荐none，生产模式推荐eval。可以自行看webpack官网。

注：上线的代码都是丑化过的，不好定位错在哪里，这是source-map就是帮助我们定位代码错误的，但是他的文件体积很大，所以这就有了不同的source-map来应对不同的情况。

entry

chunk或者chunk ground的打包入口，可以使字符串，也可以是对象（多入口）,代码如下

module.exports = {
  //...
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js',
  }, 或者
  key:{
            import:'url',
            dependon:'shared'
        },
        shared:['commom api library,for example axios' ]
};

公共代码可以用splitplungin来抽取，不用这样

optimization:{
        splitchunks:{
            shunks:'all'
        }

# Output

长的移到上面来了具体内容看代码注释

hash有三种，

hash是一旦有内容改变就修改。
content是只有自己的文件内容修改才改变。
chunk是chunk里的内容修改才改变。

注：[hash][contenthash]或者[chunkhash]的长度可以使用[hash:16]（默认为 20）来指定。或者，通过指定[output.hashDigestLength]在全局配置长度

  output: {
     //自动把上次打包的清理掉
    clean：true
    //打包出来的名字,主要的就这些，具体的看官网
    filename: '[name]_[id]_[hash]someLibName.js',
  },
};

loader

这就是个用来转化为js的函数，但是调取顺序是从下往上。常见的有css-loader，style-loader，bable-loader，html-loader等等，因为webpack只能识别js。写法

 module:{
        rules:[
            {
                test:/\.js$/,    //这个是正则匹配
                use:{
                    loader:'多种loader',
                    option:{
                        Plugins:[],
                        presets:['@bable/present-env',{
                            usebuiltins:'usage,false,entry' ,
                            corejs:'version number'
                        }]}

写一个自己的loader，这个还没弄明白，可能后面再写。

注：ts-loader，不推荐使用，因为有的对象bable认为不是es5以上的语法不能转换，需要polyfill转换，而ts用的typescript compiler这个不能使用polyfill。

bable相关内容

有的游览器不能识别ES5以上语法，所以bable来将ES5以上的代码进行转换成ES5的代码，但是上面也说了，有的是不识别的，所以需要使用polyfill，但是他实际上是一个语法糖，本质是一个个babl-xxx-xxxx 进行转换的，webpack给了一个预处理

presets:[
//一般三个预设env，ts，react
"@bable/preset-env",{
 usebuiltins:'false,usage,entry',//三选一，推荐usage，可以自己查询什么意思
 corejs:'version'
}
]

但是有的游览器是兼容ES6的语法的，但是bable不知道，还是会进行转换，这时可以下载一个browserslist来进行判断游览器版本是否适配，这个的本质好像是去caniuse里面查询，他的写法是创建一个固定的文件，然后写配置，很简单可以自己去看，bable其实也可以单独抽离成一个单独的文件。

以前还有stage-number的写法，有兴趣自己可以去查询。

plungin

就是一个通过监听webpack钩子，然后进行不同处理的函数，可以写函数也可以写对象，对象要求有apply方法，钩子好像是基于tapable这个库，可以去了解下。和vue3的自定义指令看起来差不多，vue3是install方法，他是apply方法，然后都是监听钩子，然后进行相应操作。

手写一个自己的plungin这个和loader后面再写吧，感觉plungin比loader简单点，loader后面有几个步骤有点模糊。

结尾

如果有人能看到这里，感谢大家的观看，这其实是我自己学习的一些总结，有的其实不全面，还有devserve，cache，还有怎么修改chunkid，代码压缩，css压缩，tree shaking，gzip等等......好像这样一说好多没写，但好像都很简单，看后面有没有时间去写吧!

webpack的学习体会