初学webpack配置

webpack.config.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

// console.log(process.env)

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[hash].js',
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
         loader: "babel-loader",
         options: {
           presets: ["@babel/react", "@babel/preset-env"]
         },
        // use: {
        //   loader: "babel-loader",
        //   options: {
        //     presets: ["@babel/react", "@babel/preset-env"]
        //   }
        // }
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/react", "@babel/preset-env"]
        },
        // use: {
        //   loader: "babel-loader",
        //   options: {
        //     presets: ["@babel/react", "@babel/preset-env"]
        //   }
        // }
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: '[name].[ext]'
          }
        }
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            attributes: true
          }
        }
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              disable: true,
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.tsx', '.js', '.json', '.jsx'], // 可以使导入的文件不带后缀(主要是打包使用)
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
  },
  plugins: [
    // 用来将js，css加入到模板里面
    new htmlWebpackPlugin({
      template: './public/index.html',
      filename: 'src/zhy.html',
      inject: true,
      minify: {
        removeComments: true,
      }
    }),
  ],
   devServer: {
     host: '30.77.42.34',
     historyApiFallback: true,
     contentBase:path.resolve(__dirname, 'dist'), // 这是打包的目录
     open: true,
     proxy: { // proxy URLs to backend development server
      '/api': {
        target: "http://php.test.com:8081",
        pathRewrite: {"^/api" : ""},
        secure: false,
        changeOrigin: true
      }
    }
  },
}

package.json

...
"scripts": {
    "dev": "webpack-dev-server -d --progress --colors --inline --hot --port 7000",
    "build": "webpack" // test
  },
...

注意

1. create-react-app脚手架创建的应用集成的有webpack的功能，可以自己去接入或者在图红框中改为webpack启动

2. webpack的配置应分为生产和测试环境，这里只是学习测试使用，所以只简单的列举。

遇到的问题

1. 页面报错

Cannot GET /

解决方法：contentBase指向打包的目录(网上找的解决方法),后地址：http://30.77.42.34:7000/src/zhy.html

2.  webpack配置的没有错误，代理配置的也没错，但是代理不生效，解决方案参考注意1

3.安装插件后启动总是报版本限制问题

解决方法：删除node_modules和package-lock.json，重新执行安装(报错提示的信息和网友的方案)

4. 启动和打包执行不了

解决方法：按照提示安装"webpack-cli"，"webpack-dev-server"

5. 设置了短路径别名不可用

resolve: {
    extensions: [ '.ts', '.tsx', '.js', '.json', '.jsx'], // 可以使导入的文件不带后缀(主要是打包使用)
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
  }

解决方法：之前使用webpack打包的时候，报@/componets/Header找不到，加上extensions就可以了