从0搭建webpack+react+typescript项目

1、初始化项目

1. 新建项目目录 study_demo_nino
2. cd到该目录下
3. npm init -y
4. npm install webpack webpack-cli --save-dev npm init -y 会在根目录下生成package.json

{
  "name": "study_demo_nino",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  }
}

2、新增入口，配置webpack、配置ts

3、配置git、eslint、babel等

TODO

问题汇总

1、 Failed to load '.../webpack.dev'
当出现这种问题的时候，你发现这个路径是ok的，那可以找找这个文件内部是否有错误

2、TypeError: CleanWebpackPlugin is not a constructor
将
const CleanWebpackPlugin = require('clean-webpack-plugin')
改成
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

3、 Cannot find module 'webpack-cli/bin/config-yargs' 将
"start": "webpack-dev-server --config ./config/webpack.dev.js",
改成
"start": "webpack serve --config ./config/webpack.dev.js",

4、 Uncaught Error: Module build failed (from ./node_modules/less-loader/dist/cjs.js): Error: Cannot find module 'less'
使用less不仅要安装less-loader还要安装less，且是在dependences中

5、Module build failed (from ./node_modules/css-loader/dist/cjs.js): TypeError: node.getIterator is not a function
使用了postcss-loader和less-loader
postcss从8降级到7