devServer

  1. 安装webpack-dev-server
  1. cnpm i webpack-dev-server -D
  1. 在webpack.config.js中新增配置
  1. ...其他配置项
  2.  devServer:{
  3.     port:8080,
  4.     open:true  //自动打开浏览器
  5.   }
  1. 在package.json中新增dev命令
  1. "scripts": {
  2.   "build": "webpack --config webpack.config.js",
  3.   "dev": "webpack-dev-server --config webpack.config.js"
  4. },
  1. 运行dev命令，测试效果
  1. npm run dev
  1. 报错解决

Error: Cannot find module ‘webpack-cli/bin/config-yargs’ 解决方案，降级webpack与webpack-cli版本

  1. cnpm i webpack@4 webpack-cli@3 -D

在webpack环境中，运行React项目

  1. 将React项目代码迁移至自定义webpack环境
  2. 安装依赖，启动项目
  1. cnpm i
  2. npm run dev
  1. 语法报错
  1. handleSend = async(ev)=>{ //新增任务
  2.      |              ^

babel-plugin的使用
解决方案

  1. cnpm install --save-dev @babel/plugin-proposal-class-properties
  3. 在.babelrc中配置plugins
  4. {
  5.   "presets": ["@babel/preset-react"],
  6.   "plugins": ["@babel/plugin-proposal-class-properties"]
  7. }
  1. 样式文件解析报错
  1. You may need an appropriate loader to handle this file type, 
  2. currently no loaders are configured to process this file. 
  3. | html,
  4. > body {
  5. |       margin: 0;
  6. |       padding: 0;

解决方案
css-loader

  • 安装样式解析相关loader
  1. cnpm i style-loader css-loader -D
  • 在webpack.config.js中的module.rules中配置新的规则
  1. {
  2.   test: /\.css$/,
  3.   use: [ 'style-loader', 'css-loader' ]
  4. }