课件和源代码下载地址

精选留言(31)

• 
  Geek_Jason

  2019-06-25

  老师有一个疑问，在webpack.prod.js文件里已经写入了react和React-dom的entry地址，为什么还要在html文件中引入呢？

   6

   12
• 
  采桑子

  2019-06-20

  为什么    <script src="https://11.url.cn/now/lib/16.2.0/react.min.js"></script>
      <script src="https://11.url.cn/now/lib/16.2.0/react-dom.min.js"></script>这两句必须放在body里面才起作用呢

   2

   4
• 
  刘彪

  2019-07-04

  用splitChunksPlugin分离公共资源包如：common.js，但是会出现多页面可能不引用common.js，或者引用一部分，怎么按需加载本页面需要的资源。求解答

   2

   3
• 
  KaKa

  2019-07-02

  百度： html-webpack-plugin 的作用是：当使用 webpack 打包时，创建一个 html 文件，并把 webpack 打包后的静态文件<strong>自动</strong>插入到这个 html 文件当中。
  我也不太明白已经配置了html-webpack-plugin 最后为啥要手动在index.html中添加两个script标签啊。 希望老师能够回复下
  
  

  

   3
• 
  袋袋

  2019-06-12

  如果我既想提取静态资源react,又想提取公共资源还想打到不同的文件里怎么办，支持数组方式吗

  作者回复: 可以的，这个cacheGroup 可以配置多个组的。想打包到不同的文件只需要传到 html-webpack-plugin的 chunk 按照需要设置即可

   2

   3
• 
  developer_hsl

  2019-07-09

  这里没有在html模板里面用script引入react和react-dom, webpack.prod.js配置好后,在打包后的index.html中,自动引入了react和react-dom各一次, 在search.html中各引入了两次,这是为什么啊,求翻牌!

   1

   2
• 
  Cool.liu

  2019-10-12

  老师， 如果我既想抽common 又想抽出来react和react-dom怎么做 他俩是不是只想选择一个？

   1

   1
• 
  Sherry

  2019-09-28

  老师，同时分离基础库和公共脚本，具体要怎么配呢？期望提取出的common公共脚本 + vendor基础库，都可以自定义名称。但是貌似不行。。打包出来的vendor，总是vendors~xxx_hash.js这样的。而且设置两次name，第二次的会覆盖掉第一次的。。
    这样配的： cacheGroups: {
  commons: {
  name: 'common',
  chunks: 'all',
  minChunks: 2
  },
  vendors: {
  test: /(react|react-dom)/,
                                          name: 'vendor',
  chunks: 'all'
  }
  }

  展开

   2

   1
• 
  椰树

  2019-08-13

  老师，我在使用splitChunks和htmlWebpackPlugin@next的时候，发现只有把splitChunks的minChunk设置为1也就是默认值，htmlWebpackPlugin才会把该chunk注入到html模版中。请问您有遇到过类似的问题嘛？

  

   1
• 
  韩硕

  2019-07-21

  老师，我看视频上最后那个打包公共资源部分，虽然提取出来了 commons 模块，但是 common/index.js 里面的 common 函数的内容并没有在那个打印出来的文件里面啊，我看视频上那个文件里面的内容是空的啊，这是什么原因呢

   1

   1
• 
  段子黄

  2019-06-15

  为什么使用 optimization.splitChunks 抽取了 vue、vue-router、vuex之后，当我运行的时候，浏览器中报 Uncaught TypeError: Cannot read property 'call' of undefined 这个错误哦，这些包确实是抽取出来了，但是就是运行不起来，请问下问题出在哪里，我都是按照视频的要求来配置的，只是你是用的react，我是使用的vue，应该没影响吧？

  作者回复: 嗯，和框架无关的，本身 webpack 就是通用的打包工具。能否把你的项目发个链接我看下呢？帮你分析分析

   2

   1
• 
  得闲读书

  2019-06-15

  老师会讲一些比较好点的换肤方案吗？

  作者回复: 哈哈，换肤是指 VS Code的编辑器主题吗？

   1

   1
• 
  慢半拍的奥斯卡

  2019-11-17

  为什么我按照老师的代码，注释了script和HtmlWebpackExternalsPlugin，然后配置了optimization，但是build完没有vendors.js这个文件呢？？？？求翻牌

  

  
• 
  Aaaaaaaaaaayou

  2019-11-12

  视频里打出来的common里面怎么没有common那个方法

  

  
• 
  richard_yxl

  2019-10-13

  入口文件：
  import {AppContainer} from "react-hot-loader";
  import React,{Component} from "react";
  import ReactDOM from "react-dom"
  import App from "./components/index.js"
  
  const render = Component=>{
      ReactDOM.render(
          <AppContainer>
              <Component></Component>
          </AppContainer>,
          document.getElementById("root")
      )
  }
  热更新部分代码。。。，其中App组件中包括Header和Footer React组件
  webpack部分配置
   new HtmlWebpackPlugin({
             template:"./index.html",
             inject:true,
             filename:"index.html",
             chunks:["app","vendors"],
         }),
  resolve: {
       alias: {
           'react-dom': '@hot-loader/react-dom'
       }
    },
  。。。
   splitChunks:{
          cacheGroups: {
           vendors: {
              test: /[\\/]node_modules[\\/]/,
              // test:/(react|react-dom）/,
              name:"vendors",
              chunks:"all",//initial async all
              minChunks:2
           }
          }
        }
  不知道为什么minChunks设置为>=2的时候一直无法提取vendors，而当我将它改为1的时候就可以提取出来了，老师麻烦帮忙看一下，这个问题困扰我很久啊，谢谢

  展开

  

  
• 
  change。

  2019-10-11

  module.exports = {
      //...
      optimization: {
        splitChunks: {
          // async：异步引入的库进行分离（默认）， initial： 同步引入的库进行分离， all：所有引入的库进行分离（推荐）
          chunks: 'async',
          minSize: 30000, // 抽离的公共包最小的大小，单位字节
          maxSize: 0, // 最大的大小
          minChunks: 1, // 资源使用的次数(在多个页面使用到)， 大于1， 最小使用次数
          maxAsyncRequests: 5, // 并发请求的数量
          maxInitialRequests: 3, // 入口文件做代码分割最多能分成3个js文件
          automaticNameDelimiter: '~', // 文件生成时的连接符
          automaticNameMaxLength: 30, // 自动自动命名最大长度
          name: true, //让cacheGroups里设置的名字有效
          cacheGroups: { //当打包同步代码时,上面的参数生效
            vendors: {
              test: /[\\/]node_modules[\\/]/, //检测引入的库是否在node_modlues目录下的
              priority: -10, //值越大,优先级越高.模块先打包到优先级高的组里
              filename: 'vendors.js'//把所有的库都打包到一个叫vendors.js的文件里
            },
            default: {
              minChunks: 2, // 上面有
              priority: -20, // 上面有
              reuseExistingChunk: true //如果一个模块已经被打包过了,那么再打包时就忽略这个上模块
            }
          }
        }
      }
    };

  展开

  

  
• 
  前端路上的小学生

  2019-08-09

  老师，我使用的是vue，我在官网上看到他们说推荐使用npm安装vue，那是不是vue这些基础包就不需要分离出来，那vue项目的分包策略又是什么呢

  

  
• 
  刘小宅

  2019-08-08

  老师， 如果我想把基础库的react-,reactDom分离出来， 又想把我特定的组件进行抽离出来， 并且我抽离出来的文件不一定每个页面都需要引用（按需加载）， 如何改进行操作呢

  

  
• 
  蔡鑫

  2019-07-26

  想问下关于CDN 的问题：
  1， 什么样的情况下把资源放入CDN?
  2, 有哪些CDN比较好用？
  3，一旦CDN出问题，有没有什么成熟解决（备用）方案？

  

  
• 
  张卫刚

  2019-07-12

  老师，异步引入和同步引入有什么区别？分别应该用在什么场景？希望举例解释下，感谢老师～

  

  