Please enable JavaScript.

Coggle requires JavaScript to display documents.

Webpack (核心概念 (Output (配置导出库 (libraryTarget：配置以何种方式导出库 (commonjs (差别在于…

- - - - String
        
        单入口，单文件
      - Array
        
        单入口，多个文件，最后只会生成一个chunk，用于需要打包多个库的场景
      - Object
        
        多入口，多chunk
        
        { a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}
    - - String or Array：main
      - Object：键值对名字
    - - 函数返回entry对象（可以返回promise）
    - - 必须为绝对目录，Webpack的相对目录会以context为根目录
      - 用法
        
        config 的 context 字段配置
        
        启动时，带上Webpack --context 参数
  - - - 最终输出的文件名（一个chunk对应一个output）
      - 内置变量
        
        id
        
        Chunk id，从0开始
        
        name
        
        Chunk 名称
        
        chunkhash
        
        Chunk内容的hash
        
        hash
        
        Chunk唯一标识hash
        
        [hash:8] 代表取8位 Hash 值，默认是20位
    - - 配置无入口的 Chunk 在输出时的文件名称
      - 常见场景
    - - 配置输出文件存放在本地的目录，必须是 string 类型的绝对路径
    - - 配置发布到线上资源的 URL 前缀，为string 类型
        
        filename:'[name]_[chunkhash:8].js'
        
        publicPath: 'https://cdn.example.com/assets/'
        
        <script src='https://cdn.example.com/assets/a_12345678.js'></script>
      - 内置变量：hash
    - - 异步加载配置项，实现方式为JSONP
      - crossorigin 值
        
        anonymous(默认) ：在加载此脚本资源时不会带上用户的 Cookies
        
        use-credentials 在加载此脚本资源时会带上用户的 Cookies
    - - library：配置导出库的名称
      - libraryTarget：配置以何种方式导出库
        
        var
        
        window
        
        gloabl
        
        this
        
        commonjs
        
        差别在于 CommonJS 只能用 exports 导出，而 CommonJS2 在 CommonJS 的基础上增加了 module.exports 的导出方式
        
        commonjs2
      - libraryExport
        
        libraryTarget被设置成 commonjs 或者 commonjs2 时生效
        
        配置要导出的模块中哪些子模块需要被导出
  - - - Module.plugins中声明并进行配置，每一个都是一个插件实例
        
        name：当前的文件名
        
        contenthash：代表根据文件内容算出的8位 hash 值
      - Module.rules中指定用法
    - - extract-text-webpack-plugin
        
        用于提取代码片段到一个单独的文件
  - - - Webpack本身不能解析非Js文件
      - 非Js文件需要专门的编译器（Loader）来进行解析
    - - css
        
        css-loader：用于识别.css文件
        
        style-loader：用于将css注入Js文件中
        
        工作原理：用字符串的形式表达CSS，后面动态的创建style标签，在HTML head中插入HTML style标签，来生成CSS，如果需要单独抽离CSS，需要用到插件功能
    - - Module.rules中指定
      - 如何给Loader带参数？
        
        1、通过querystring
        
        css-loader?minimize
        
        2、通过Object的形式
        
        在options中指定
      - 直接在JS文件中指定
        
        require('style-loader!css-loader?minimize!./main.css');
  - - - 条件匹配
        
        test
        
        include
        
        exclude
      - 应用规则
        
        use
        
        默认是从右往左倒序解析
      - 重置规则
        
        enforce
        
        post在最后面
        
        pre在最前面
    - - 应对jQuery等大型非模块化库
    - - 细化解析规则到代码块，配置具体的解析功能
  - - - 通过别名来把原导入路径映射成一个新的导入路径
      - $，支持 $ 符号来缩小范围到只命中以关键字结尾的导入语句，如react$
    - - 未带文件名时如何补充后缀
    - - 指导如何寻找第三方模块