课件和源代码下载地址

精选留言(42)

• 
  路小静

  2019-05-31

  我没装babel，js入口里写了个箭头函数，webpack命令后，也成功编译了 为什么？

  作者回复: 这是因为 webpack4 在 mode 设置成 production 后会默认使用了terser-webpack-plugin插件，这个插件可以支持 ES6 语法的 uglify。
  
  这个是压缩插件的切换历史：https://github.com/webpack/webpack/commit/311a7285d36b38bada46102967c431e93ff48a89
  
  Some history:
  * `uglifyjs-webpack-plugin` < v1.0 used the minifier `uglify-js`
  * however `uglify-js` does not support ES6, which resulted in a fork
    called `uglify-es` that was developed in the `uglify-js` repository,
    but under the `harmony` branch
  * `uglifyjs-webpack-plugin` v1.x switched to `uglify-es` for ES6 support
  * however `uglify-es` stopped being maintained:
    mishoo/UglifyJS2#3156 (comment)
  * which led to a fork called `terser` that has incorporated all of
    the unmerged PRs and will be where all new development occurs:
    https://github.com/fabiosantoscode/terser
  * `terser-webpack-plugin` was created, which is the `terser` equivalent
    of `uglifyjs-webpack-plugin`:
    https://github.com/webpack-contrib/terser-webpack-plugin
  * `uglifyjs-webpack-plugin` v2.x will be switching back to `uglify-js`,
    so any project that needs to support ES6 now needs to switch to
    `terser-webpack-plugin`.
  
  Fixes #7923.

  

   10
• 
  Jeff、

  2019-06-08

  npm i react react-dom @babel/preset-react -D;
  这样把react react-dom放在devDependencies中没问题吗？
  我想知道package.json中dependencies和devDependencies的区别...

  作者回复: 嗯，这个是为了演示哈。对于 react和 react-dom 应该是：
  npm i react react-dom -S
  
  对于构建相关配置应该：
  npm i @babel/preset-react -D
  
  package.json中dependencies和devDependencies的区别是：devDependencies用于本地环境开发时候，dependencies用户发布环境，也就是开发阶段的依赖最后是不对被打入包内。
  
  通常框架、组件和 utils 等业务逻辑相关的包依赖放在dependencies里面，对于构建、ESlint、单元测试等相关依赖放在devDependencies中

   2

   6
• 
  kaiking

  2019-08-13

  
  老师，跟着您的步骤走，我这边报这个错，是什么原因？
  Uncaught TypeError: o.a.render is not a function
  我把我做的上传到了git，麻烦老师帮忙看下: https://gitee.com/kaiking_g/webpack-errors.git

  作者回复: import ReactDom from 'react';
  
  这一行需要改成：
  import ReactDom from 'react-dom';

   1

   2
• 
  Baron

  2019-06-04

  希望后续能简单讲解一下.babelrc文件的配置

  作者回复: 主要是这个 .babelrc 比较简单，其实就包含两块内容，一个是 babel presets，另一个是 babel plugins数组。比如 .babelrc 文件：
  {
      "presets": [
        "@babel/preset-env”
      ],
      "plugins": [
          "@babel/proposal-class-properties"
      ]
  }
  
  plugin 用来支持某个功能，presets 是多个 plugin 的集合。就是这么简单

  

   2
• 
  Geek_cd8e9b

  2019-10-30

  老师，您自己在配置loader的时候好像正则表达式好像忘了转义“.”了
  原视频如下：
  module: {
       rules: [
           {
               test: /.js$/,
               use: 'babel-loader'
           }
       ]
  }
  应该是：
  module: {
       rules: [
           {
               test: /\.js$/,
               use: 'babel-loader'
           }
       ]
  }

  展开

  

   1
• 
  x

  2019-09-06

  关于react解析的时候loader报错的，不知道有没有人和我一样，在loader那里的正则匹配加了引号

  

   1
• 
  Geek_e0d3b3

  2019-12-07

  按照教程走的, 为啥报这个错. loader 配置都一样的.
  ERROR in ./app/main.js 11:6
  Module parse failed: Unexpected token (11:6)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  | render() {
  | return (
  > <div>This is a react Learn component</div>
  | )
  | }

  展开

  

  
• 
  Valar Morghulis

  2019-11-12

  babel7的配置文件从 .babelrc 改为了 babel.config.js

  

  
• 
  Ctl

  2019-11-10

  作者你好，有没有 vue相关webpack配置的例子？

  

  
• 
  windki

  2019-10-29

  跟老师视频一模一样的步骤，报错：
  Module parse failed: Unexpected token (8:9)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  | class Search extends React.Component {
  | render() {
  > return <div>Search Text</div>;
  | }
  | }
  
  
  

  展开

  

  
• 
  花狗是我

  2019-10-12

  老师，为何上一小节，没有引入babel，webpack却也可以压缩编译？

  

  
• 
  feidiy

  2019-09-03

  Babel/preset-env是否会对fetch兼容呢
  这个对Babel版本有要求吗

  

  
• 
  李萬濟

  2019-08-30

  老师请问一下，安装的@babel/core这个插件的作用是什么？这个插件是否是babel的核心插件？相当于webpack的webpack，每次使用babel就需要下这个插件？

   2

  
• 
  endeavor

  2019-08-25

  老师，我用babel 下载babel-loader @babel/core @babel/preset-env webpack打包一直报错，求解！
  

  

  
• 
  刚好喜欢你丶

  2019-08-21

  老师，能不能额外补充一起webpack打包ts、tsx文件的视频呀？

  

  
• 
  27

  2019-08-02

  老师 ，mode 设置成 none ，没有 .babelrc 文件 ，照样打包成功。是什么原因呢 ？
  代码：27ng.com/fe/webpack/webpack.zip

  作者回复: 这个应该不会，看代码链接访问是403，可以重新提供一个链接吗？我帮你看看。

   1

  
• 
  GitHubGanKai

  2019-07-14

  不好意思 老师 刚才我问题的问题 我找到答案了 是我自己粗心 代码写错了 多加了个引号
  
  module: {
      rules: [
        {
          test: /.js$/, // 注意这个地方 不能写成 ‘/.js$/’ 这个没有引号的，否则报错~~
          use: 'babel-loader'
        }
      ]
    }
  我看了一下留言区有人和我出现一样的问题 ，估计都是是这个问题。

  展开

  作者回复: 哦哦，好嘞，强👍

  

  
• 
  GitHubGanKai

  2019-07-14

  老师我按照你视频中的讲解进行操作，但是在解析jsx 的时候，出现了这个报错，说我没有按照相应的loader，但是我是按照你视频中的操作，一步一个代码敲的啊！
  
  ERROR in ./src/search.js 9:11
  Module parse failed: Unexpected token (9:11)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  |
  | render() {
  > return <div>Search Text</div>;
  | }
  | }

  展开

  作者回复: 这个之前不少同学都遇到过，需要先检查下项目跟目录下是否有 .babelrc 文件(注意是否拼写错误)，然后.babelrc 文件的内容是否正确。
  
  另外可以和课件的源码对照比较一下

  

  
• 
  森林迷了鹿

  2019-07-13

  老师，你写错啦，import ReactDom from 'react-dom';不是from react，不然报错。

  作者回复: 嗯嗯，这个当时录制的时候也注意到啦，后面有修改的哈

  

  
• 
  森林迷了鹿

  2019-07-12

  Uncaught TypeError: o.a.render is not a function
      at Module.<anonymous> (search.js:1)
      at r (search.js:1)
      at search.js:1
      at search.js:1
  
  
  构建成功了，但是页面里文字没出来~我百度也没找到

  展开

  

  