Web工程从零构建问题汇总

抛开create-react-app脚手架，一行一行搭建react开发框架和webpack打包框架，遇到一些问题，在此进行记录。

• 1、执行npm run dev直接报错
  
  • 原因：babel-loader的版本和babel-core版本不一致所致
  • 解决方案：除了需要同步安装babel-core插件外，babel-loader还需要降版本，执行命令：npm install babel-loader@7
  • 原因：缺少es6语法解析插件
  • 解决方案：
    • 1、npm install babel-preset-es2015 babel-preset-react插件
    • 2、新增.babelrc文件，补充配置：presets: {‘react’, 'es2015}

• 2、为实现导入文件时省略后缀名打包不报错，需要添加配置：
  
• 3、使用CleanWebpackPlugin报错
  
  • 原因：CleanWebpackPlugin插件内部结构在新版本中进行了调整，require(‘clean-webpack-plugin’)的返回值并不是CleanWebpackPlugin，而是：{ CleanWebpackPlugin }
  • 解决方案：通过解构，获取CleanWebpackPlugin对象：
    
• 4、动态加载模块打包报错：
  • 原因：动态import方法无法被解析，缺少babel-plugin-syntax-dynamic-import插件
  • 解决方案：
    • 安装babel-plugin-syntax-dynamic-import插件；
    • 在.babelrc文件中配置：plugins: ["syntax-dynamic-import]

• 5、在jsx中使用箭头函数报错：
  • 原因：缺少编译jsx中es6语法的版块
  • 解决方案：安装stage板块，如npm install babel-preset-stage-1；在.babelrc文件中配置stage-1