webpack最基础的配置

以下是一个基本的webpack配置示例,它包括了入口文件、输出配置以及模式设置(开发模式或生产模式)。

javascript 复制代码
const path = require('path');
 
module.exports = (env, argv) => {
  // 根据传入的参数确定是开发模式还是生产模式
  const isProduction = argv.mode === 'production';
 
  return {
    // 项目入口文件
    entry: './src/index.js',
    // 输出配置
    output: {
      // 输出文件名
      filename: 'bundle.js',
      // 输出路径
      path: path.resolve(__dirname, 'dist'),
      // 在生产模式下添加代码压缩和优化
      ...(isProduction && {
        optimization: {
          minimize: true,
          // 这里可以添加更多的优化配置
        },
      }),
    },
    // 在开发模式下添加 source maps 帮助调试
    devtool: isProduction ? false : 'inline-source-map',
    // 模块配置
    module: {
      rules: [
        {
          // 处理 JavaScript 文件
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
        {
          // 处理 CSS 文件
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
        // 这里可以添加更多的规则来处理其他类型的文件
      ],
    },
    // 插件配置
    plugins: [
      // 这里可以添加插件
    ],
    // 开发服务器配置
    devServer: {
      contentBase: './dist',
      open: true,
      port: 3000,
    },
  };
};

这个配置文件提供了基本的入口、输出以及模块加载配置。它使用了环境变量来判断当前是开发模式还是生产模式,并根据模式配置不同的输出和优化。同时,它包括了对.js.css文件的基本处理,以及开发服务器的配置。这个配置是一个基础,你可以根据自己的项目需求进行扩展和定制。

相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
JavaScript二叉树相关概念
前端
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术8 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体