webpack

本质上,webpack 是一个用于现代js应用的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块合成一个活多个的bundles，他们均为静态资源，用于展示你的内容

webpack的核心概念 
1.入口 entry 
2.输出 output
3.loader
4.插件plugin
5.模式mode
6.浏览器兼容性 brower compatibility
7.环境 envioronmrnt

###入口entry
入口七点指示webpack应该使用哪些个模块，来作为内部依赖图的开始。进入入口起点后，webpacck会找出哪些模块和库是入口起点（直接和间接）依赖的
默认值是./src/index.js 但是你可以通过webpack configuration中配置entry属性，来指定一个（或多个）不同入口的起点
moudule.exports={
    entry:'./xxx/xxx/xxx.js',
}

###输出output
output属性告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件。主要输出文件的默认值是./dist/main.js 其他生成文件默认放置在./dist文件夹中
我们可以通过咋配置中指定一个output字段，来配置这些处理过程
const path = require('path')

moudule.exports={
    entry:'./xxx/xxx/xxx.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'xxx.xxx.xx.js'
    }
}

###loader 
webpack只能理解js和json文件，这是webpack开箱可用的自带能力.loader让webpack能够去处理其他类型的文件，并将他们转换为有效模块，以供程序使用，以及被添加到依赖图中
在更高的层面，在webpack的配置中，loader有两个属性
1.test属性，识别出哪些文件会被转换
2.use属性，定义出在进行转换时应该使用哪个loader
webpack.config.js
module.exports={
    output:{
        filename:'xxxx.bundle.js',
    },
    moudle:{
        rules:[{test:/\txt$/,use:'raw-loader'}],
    }
}

###插件(plugin)
loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括:打包优化，资源管理，注入环境变量
想要使用一个插件，，你只需要require（）,然后把它添加到plugins数值中。多数插件可以通过选项（option）自定义。你也可以在一个配置文件中因为不同的目的而多次使用同一个插件，这时需要通过使用new操作符来创建一个插件实例
webpack.config.js
const htmlwebpackPligin =require('html-webpack-plugin');
const webpack = require('webpack')

moudule.exports={
    module:{
        rules：[{test:/\.txt$/,use:'raw-loader'}]
    },
    plugins:[new HtmlWebpackPlugin({template:'./src/index.html'})],
}

###模式mode
通过选择development priduction 或 none 之中的一个。来设置mode参数，你可以启用webpack内置在相应环境下的优化。其默认值为production
module.exports={
    mode:'production',
}

###浏览器兼容性(browser compatibility)
webpack支持所有符合es5标准的浏览器(不支持ie8及以下的版本)。webpack的import（）和require.ensure（）需要promise。 如果你想要支持旧版的浏览器，在使用这些表达式之前，还需要提前加载polyfill

###环境environment
webpack5运行与node.js v10.13.0+版本

###入口详细版本
单个入口
用法:entry:string|[string]
webpack.config.js
module.exports={
    entry:'./path/xxx/xxx/xxx.js'
}，
entry属性的单个入口语法，以下是形式的简写
webpack.config.js
moudule.exports={
    entry:{
        main:'./path/to/my/entry/file.js'
    }
}
我们也可以将一个文件路径数组传递给entry属性，这将创建一个所谓的“multi-main entry” 在你想要一次注入多个依赖文件，并且将染的依赖关系绘制在一个chunk中时，这种方式就很有用
webpack.config.js
module.exports={
    entry:['./xxx/xxxx.js','./xxx/xxx.js'],
    output:{
        filename:'xxx.js'
    }
}
对象语法
用法：entry{ string | [string] } | {}
webpack.config.js
moudule.exports={
    entry:{
        app:'.xxx/xx.js',
        adminApp:'./xxx/xx.js',
    }
}
对象语法会比较繁琐。但是，这是应用程序中定义入口的最可扩展的方式
（webpack配置的可扩展是指，这些配置可以重复使用，并且可以与其他配合使用的一种流行技术，用于讲关注点从环境，构建目标，运行时中分离。然后使用专门的工具，将它们合并起来）
描述入口的对象
用于描述入口的对象。你可以使用如下属性
1.dependon 当前入口所依赖入口。它们必须在该入口加载前被加载
2.filename:知道要输出的文件名称
3.import 启动时需加载的模块
4.libray:指定libray选项，为当前entry构建一个libray
5.runtime：运行时chunk的名字。如果设置了，就会创建一个新的运行时chunk。
6.pulicpath:当该入口的输出文件在浏览器被引用时，为它们指定一个公共的url地址

output 输出
可以通过配置output选项，告知webpack如何向硬盘写入编译文件（注意：即使存在多个entry起点，但只能指定一个output配置）
用法
在webpack配置中,output属性的最低要求是，将它的值设置为一个对象，然后为将输出文件的文件名配置为一个output.filename
webpack.config.js
module.exports={
    output:{
        filename:'xxx.js'
    }
}
(此配置讲一个单独的bundle.js文件输出到dist目录中）
多个入口起点
如果配置中创建多于一个"chunk"(例如，使用多个入口起点或者像commonsChunkPlugin这样的插件），则应该使用占位符（subsitions）来确保每个文件具有唯一的名称
moudule.exports={
    entry:{
        app:'./xx/xx.js',
        search:'./xx/xxx.js'
    },
    output:{
        filename:'[name].js',
        path:_dirname+'/dist',
    }
}

loader 用于对模块的源代码进行转换。loader可以使你在import或"load（加载）"模块时预处理文件。因此loader类似于其他构建工具中"任务(task)"，并提供了处理前端构建步骤的得力方式。
loader可以将文件从不同的语言（如ts）转换成Js活将内联图像转换为data_url loader 甚至允许你直接在js模块中import css文件
可以使用loader告诉webpack加载css文件，或者将ts转换为Js.需要提前安装对应的loader
webpack.config.js
moudule.exports={
    module:{
        rules:[
            {test:/\.css$/,use:'css-loader'},
            {test:'/\.ts/,use:'ts-loader'}
        ],
    },

};
使用loader 
在你的应用程序中，有两种使用loader的方式
1.配置方式(推荐）：在webpack.config.js文字中指定loader。
2.内联方式:在每个import语句中显式指定loader

configuration 
module.rules允许你在webpack配置中指定多个loader.这种方式是展示loader的一种简明的方式

configuration 
moudule.rules 允许你在webpack配置中指定多个loader。这种方式是展示loader的一种简明的方式,并且有助于使代码变的简洁和易于维护。同时让你对各个loader有个全局概览

loader从右到坐（或从下到上）地取值（evalute）执行(execute）。在下面的实例中，从sass-loader开始执行，然后继续执行css-loader，最后以style-loader为结束。
module.exports={
    module:{
        rules:[
            {
                test:'/\.css$/,
                use:[
                    {loader:'style-loader'},
                    {
                        loader:'css-loader',
                        options:{
                            modules:true    
                        }
                    },
                    {loader:'sass-loader'}
                ]
            }
        ]
    }
}
loader特性
1.loader支持链式调用。链式中的每个Loader会将转换应用在已处理过的资源上。一组链式的loader讲安装相反的顺序执行。链中的第一个loader将其结果（也就是应用过转换后的资源）传递给下一个loader，依次类推。最后，连中的最后一个loader，返回webpack所期望的js
2.loader可以是同步的，也可以是异步的
3.loader运行在node.js中，并且能够执行任何操作
4.loader可以通过options对象配置（仍然支持使用query参数来设置玄子昂，但是这种方式已经被废弃）
5.除了常见的通过packge.json的main来讲一个npm 模块导出为loader，还可以再modeule.rules中使用loader字段直接引用一个模块
6.插件plugin可以为Loader带来更多特性
7.loader能够产生额外的任意文件

plugin
插件是webpack的支柱功能。webpack自身也是构建中webpack配置中用到的相同的插件系统之上
插件目的在于解决loader无法实现的其他事,webpack提供很多开箱即用的插件
webpack插件是一个具有apply方法的js对象。apply方法会被webpack compiler调用,并且在整个编译生命周期都可以访问compiler对象
consolelogonbuildwebpackplugon.js
const pluginname ='xxxxx'
class consoleOnBuildWebpackPlugin{
    apply(compiler){
        compiler.hooks.run.tap(pluginname,(compilation)=>{
            xxxx
        }
    }
}
用法
由于插件可以携带参数、选项，你必须在webpack配置中，向plugins属性传入一个new实列。取决于你的webpack用法，对应有多种使用插件的方式。