配置个简单的wepack4项目

npm -y init 

记录配置，可根据个人需求新增活减少功能

新建webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { apiPage } = require('./src/utils/apiPage');
// const NODE_ENV = process.env.NODE_ENV; // 获取环境变量
const page = {
  module:{
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      {
        // 匹配以.css结尾的文件
        test: /\.css$/,
        // exclude: /node_modules/,
        // 先后使用 css-loader 和 style-loader
        // 注意执行顺序是从右向左
        use: [
          MiniCssExtractPlugin.loader, 
          { loader: "css-loader"}
        ]
      },
      {
        test: /\.less$/,
        // exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader, 
          { loader: "css-loader" },
          { 
            loader: "less-loader",
            options: {
              modifyVars: {
                'border-radius-base': '3px',
                'border-radius-sm': '2px',
                'shadow-color': 'rgba(0, 0, 0, 0.05)',
                'shadow-1-down': '4px 4px 40px @shadow-color',
                'border-color-split':' #f4f4f4',
                'border-color-base': '#e5e5e5',
                'menu-dark-bg': '#3e3e3e',
                'text-color': '#666',
                'primary-color': '#4bbcb7'
              },
              javascriptEnabled: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|jpg|json)$/i,
        exclude: [/\.(js|mjs|jsx|ts|tsx|less|css)$/, /\.html$/],
        use: {
          loader: "file-loader",
          options: {
            name: '[path][name][chunkhash:8].[ext]',
            // publicPath: 'assets',
          },
        },
      },
    ]
  }
}
// start本地运行配置
if (process.env.TYPE === 'start') {
  page.entry = './src/index.js',
  page.output = {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].[chunkhash:8].js',
    chunkFilename: 'js/[name].[chunkhash:8].js',
  }
  page.plugins = [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "css/[chunkhash:8].css",
　　   chunkFilename: "css/[chunkhash:8].css"
    }) 
  ]
  page.devServer = {
        contentBase: path.join(__dirname, '/src/'), //设置服务器访问的基本目录
        host:'localhost', //服务器的ip地址
        port: 8089,  //端口
        open: false  //自动打开页面
  }
  // 配置代理
  if (apiPage.proxy) {
    const proxy = {};
    const apiKeys = [];
    for(let k in apiPage.apiList) {
      apiKeys.push(k);
    }
    apiKeys.forEach((item) => {
      let pathRewrite = {};
      pathRewrite[`^/${item}`] = '';
      proxy[`/${item}`] = {
        target: apiPage.apiList[item],
        pathRewrite: pathRewrite,
        changeOrigin: true,
      }
    });
    page.devServer.proxy = proxy;
  }
} else {
  // 打包 配置
  page.entry = './src/index.js',
  page.output = {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'CmbcDashboardPlugIn',
    libraryExport: "default",
    chunkFilename: 'js/[name].[chunkhash:8].js',
    libraryTarget: 'umd',
  }
  page.plugins = [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "css/[chunkhash:8].css",
      chunkFilename: "css/[chunkhash:8].css"
    }),
    // new HtmlWebpackPlugin({
    //   template: './index.html'
    // }),
  ]
}
module.exports = page;

package.json 需要安装的插件

{
  "name": "vdemo",
  "version": "1.0.6",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "cross-env TYPE=start webpack-dev-server --mode development",
    "build": "cross-env TYPE=build webpack --mode=development --config webpack.config.js",
    "build-min": "cross-env webpack --mode=production --config webpack.config.js",
    "compile": "babel ./src -d lib --copy-files",
    "compile1": "babel src --out-dir lib --copy-files",
    "build1": "babel src --out-file lib/main.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/runtime-corejs3": "^7.12.13",
    "axios": "^0.19.2",
    "file-loader": "^6.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "@babel/plugin-transform-runtime": "^7.12.15",
    "@babel/preset-env": "^7.12.13",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.13.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "html-webpack-plugin": "^4.3.0",
    "less": "^3.11.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "rimraf": "^3.0.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "cross-env": "^7.0.2"
  },
  "browserslist": [
    "ie >= 10",
    "iOS 7"
  ]
}

babel.config.js 文件

// module.exports = {
//   presets: [
//     [
//       "@babel/preset-env", {
//         'modules': 'umd',
//         'useBuiltIns': 'usage',
//         "corejs": "3",
//         // "spec": true,
//         'targets': {
//           'browsers': ['ie >= 8', 'iOS 7'] // 支持ie8，直接使用iOS浏览器版本7
//         },
//       }
//     ]
//   ],
//   plugins: []
// }
module.exports = {
  presets: [
    [
      "@babel/preset-env", {
        'modules': 'umd',
        // 'useBuiltIns': 'entry',
        // "corejs": "3",
        // "spec": true,
        // 'targets': {
        //   'browsers': ['ie >= 8', 'iOS 7'] // 支持ie8，直接使用iOS浏览器版本7
        // },
      }
    ]
  ],
  plugins: [[
    "@babel/plugin-transform-runtime", {
      "corejs": 3,
      // "helpers": true,
      // "version": "^7.12.13",
      // "useESModules": false,
    }
  ]]
}

.babelrc文件

// {
//   "presets": [
//     "@babel/preset-env",
//     "@babel/preset-react"
//   ],
//   "plugins": [
//     [
//       "import",
//       {
//         "libraryName": "antd",
//         "libraryDirectory": "lib",
//         "style": true
//       }
//     ]
//   ]
// }
{
  "presets": [
    [
      "@babel/preset-env", {
        "modules": "umd"
        // 'useBuiltIns': 'entry',
        // "corejs": "3",
        // "spec": true,
        // 'targets': {
        //   'browsers': ['ie >= 8', 'iOS 7'] // 支持ie8，直接使用iOS浏览器版本7
        // },
      }
    ]
  ],
  "plugins": [[
    "@babel/plugin-transform-runtime", {
      "corejs": 3
      // "helpers": true,
      // "version": "^7.12.13",
      // "useESModules": false,
    }
  ]]
}