webpack.config.js

/*common.js   node*/
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
/*webpack-dev-server配置文件中必须mode是development*/
module.exports = {
  mode: "development",
  entry: path.join(__dirname, './src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: "bundle.js",
    /*publicPath必须书写,否则就会出现问题 动态路由会出现问题*/
    publicPath: "/"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: "index.html"
    }),
  ],
  module: {
    rules: [
      //loader配置
      {
        test: /\.css$/, use: ['style-loader','css-loader']
      },
      {test: /\.less$/, use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[name]-[local]-[hash:8]',
            },
            sourceMap: true
          }
        }, 'less-loader'], exclude: [/node_modules/]},
      {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], exclude: [/node_modules/]},
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024,
              name: '[path]-[name]-[hash:5].[ext]'
            }
          }
        ],
        exclude: [/node_modules/, /dist/]
      },
      //(js|jsx)  jsx?  表示前面一项可有可无。
      {test: /\.jsx?$/, use: ['babel-loader'], exclude: [/node_modules/, /dist/]},
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.jsx'],
    alias: {}
  },
  //此选项控制是否生成，以及如何生成 source map 打包的文件和本地的源文本做映射关系。
  devtool: "cheap-module-eval-source-map",
  devServer: {
    port: 8888,
    open: true,
    hot: true,
    historyApiFallback: true, //支持historyapi刷新
    proxy:{
      '/api':{
        target:'https://douban-api-git-master.zce.now.sh',
        pathRewrite:{'^/api':''},
        changeOrigin: true,
        secure: true, // 接受 运行在 https 上的服务
      }
    }
  }
}

package.json文件
npm install

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "antd": "^3.22.2",
    "axios": "^0.19.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.5",
    "babel-plugin-import": "^1.12.1",
    "babel-plugin-transform-runtime": "~6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.2",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server "
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}