webpack小记

const path = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require('webpack');
const txtWebpackPlugin = require("./myPlugins/txt-webpack-plugin.js");


module.exports = {
  entry:{
      app:'./src/index.js',
  },
  devtool: 'inline-source-map',//追踪到错误和警告在源代码中的原始位置
  //devServer: {
  //  contentBase: "./dist",
   // open: true,
   // port: 8082,
    //hot: true,//启用 webpack 的模块热替换特性
  //  hotOnly: true,
  //},
  devServer: {
    // 运行代码的目录
    //一般与在ouput中配置的path: resolve(__dirname, 'build')一致
    contentBase: resolve(__dirname, 'build'),
    // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
    watchContentBase: true,
    watchOptions: {
      // 监视时需要忽略某些文件
      ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quiet: true,
    // 如果出错了，不要全屏提示~
    overlay: false,
    // 服务器代理 --> 解决开发环境跨域问题
    proxy: {
      // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，
      // 就会把请求转发到另外一个服务器(3000)
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时，请求路径重写：
        // 将 /api/xxx --重写为--> /xxx （去掉/api）
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.less$/,
          use: ['style-loader', 'css-loader','postcss-loader','less-loader']
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"]
            }
          }
        }
      ]
  },
  plugins: [
    new CleanWebpackPlugin(),//清楚多余的dist文件
    new HtmlWebpackPlugin({
        title: 'Output Management'
    }),
    new txtWebpackPlugin({
      name: "自定义插件",
    }),
    new webpack.HotModuleReplacementPlugin()//热模块更新
    
  ],
  output:{
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  mode:"development",
}