webpack基本概念

1、entry：入口

      webpack可以同时打包多个文件，只要规定了各个文件的入口文件。

      1.1.单页面：一个入口起点

            如果传入一个字符串或字符串数组，chunk 会被命名为 main；    

一个字符串 一个数组 一个对象

    1.2.多页面：多个入口起点

    如果传入一个对象，则每个键(key)会是 chunk 的名称，该值描述了 chunk 的入口起点。

多入口配置

2、output：输出

    2.1.  filename：

        决定每个输出bundle的名字，这些bundle将写入到output.path指定的目录下。

        2.1.1 单入口起点：filename是静态名称

单入口起点

        2.1.2  多入口起点

            要为每个bundle赋予一个唯一的名称......

            使用入口名称： filename: '[name].js'

            使用内部 chunk id:    filename :'[id].js'

            使用每次构建时，唯一的hash值：filename: ' [name].[hash].js'

             使用基于每个chunk生成的hash:   filename:' [chunkhash].js'

        2.2 path:

              编译文件输出的绝对路径。    

        2.3 publicPath:

                以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀

        2.4 chunkFilename

                在按需加载（异步）模块的时候，这样的文件是没有被列在entry中的，如使用require的方式异步加载模块.

        2.5 crossOriginLoading

               异步加载资源的时候，是否带上cookie。只用于 target 是 web，使用了通过 script 标签的 JSONP 来按需加载 chunk。

    anonymous: 不会带上

   use-credentials:带上cookie 

3、module：模块

 每个文件都是一个模块，有各自的依赖关系。webpack通过各种loader去编译各种语言和预处理器模块，loader解释了webpack如何去编译非js模块。  webpck支持多种方式实现模块化，import/require/@import ...  决定了如何处理项目中不同类型的模块。

    3.1  rules：条件

        test: 用于匹配待处理文件名的正则

        include: 只命中该目录下的文件

        exclude: 排除该目录下的文件不作处理 

    3.2 rules：结果

        条件匹配的文件会应用配置的规则结果  进行处理，有两种

        3.2.1 loader

              loader：是Rule.use:[{ loader }]的简写，也就是如果解析此类文件只需要加上对应的loader插件，不需要其他的loader配置项时，可以使用一个loader字符串，或loader字符串数组；

            use： 是object且必须有一个 loader 属性是字符串，可以有一个 options 属性为字符串或对象。值可以传递到 loader 中，将其理解为 loader 选项。

            options（query已弃用）： 是Rule.use:[{ options }] 的简写，是use的子集，在没使用use的情况下，跟loader同级，值会传递给编译器，可以理解为loader选项。

            影响loader的配置项，loader / options / use        

4、Resolve：解析

    webpack启动后会从入口文件触发，找出所有依赖的文件。resolve的角色就是设置模块如何被解析。

    4.1.alias 

        创建 import 或 require 的别名，来确保模块引入变得更简单。在给定对象的键后的末尾添加 $，以表示精准匹配。精准匹配：即使在导入别名时，加了一级文件夹，也会精准匹配的指定的文件。

    4.2 extensions

        自动解析指定的扩展，能够使用户在引入模块时不带扩展；

        默认值：extensions:[".js",".json"]，配置了此项，会覆盖掉默认的数组

    4.3 enforceExtension

           Boolean，默认false，允许无扩展名文件。  

5、devServer

    1.hot

        是否模块热替换功能

    2.inline   

        是否自动注入这个代理客户端到将运行在页面里的 Chunk 里去。默认是true，推荐是true

     3.historyApiFallback

        辅助单页面开发的项目。会导致任何请求都会返回 index.html 文件，这只能用于只有一个 HTML 文件的应用。

    4.contentBase

        配置 DevServer HTTP 服务器的文件根目录。 默认情况下为当前执行目录，通常是项目根目录。

    5.headers

        可以在 HTTP 响应中注入一些 HTTP 响应头。跨域的时候需要设置响应头。

    6.host

        配置 DevServer 服务监听的地址。默认是127.0.0.1

     7.port

        配置 DevServer 服务监听的端口，默认使用 8080 端口

       8.allowedHosts

            host白名单，数组。只有host在这个数组里面的请求才能正常返回。

allowedHosts: [

    // 匹配单个域名

    'host.com',

    'sub.host.com',

    // host2.com 和所有的子域名    *.host2.com 都将匹配

    '.host2.com']

      9.disableHostCheck

            配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。默认只接受来自本地的请求。

      10.https

            DevServer 默认使用 HTTP 协议服务，它也能通过 HTTPS 协议服务。 有些情况下你必须使用 HTTPS，例如 HTTP2 和 Service Worker 就必须运行在 HTTPS 之上。true/false

6、webpack 4.x的坑点

    1.webpack4.x中使用extract-text-webpack-plugin插件会报错。解决办法

npm install extract-text-webpack-plugin@next

https://www.webpackjs.com/loaders/

为模块创建解析器的选项对象。为模块创建解析器的选项对象。