Webpack基础演示与配置指南

Webpack是一个现代JavaScript应用程序的模块打包工具，能够将各种资源（如JavaScript文件、CSS样式、图片等）整合并转换为浏览器可识别的格式。这个"webpack demo"展示了Webpack的基本用法和配置。

核心概念： 1. 模块：Webpack将任何文件视为模块，通过import或require进行引用。 2. Entry：入口定义了哪些模块需要被打包，通常有一个app.js作为主入口。 3. Loader：加载器用于转换不同类型的模块，比如将ES6转为ES5或将SCSS转换为CSS。 4. Plugin：插件扩展Webpack功能，执行任务如优化资源、生成HTML文件等。 5. Output：配置打包后文件的路径和命名。

主要功能： 1. 代码分割：通过动态导入或SplitChunksPlugin实现按需加载，减少初始加载时间。 2. 热模块替换：允许更新模块而不刷新整个页面，提高开发效率。 3. 源码映射：生成源码映射，便于调试压缩后的代码。 4. 资产处理：处理非JavaScript资源，生成优化后的URL。 5. Tree Shaking：静态分析ES6模块，移除未使用代码，减小体积。

配置示例：创建webpack.config.js时，需要指定入口、输出、加载器和插件：

module.exports = {
  entry: './app.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js' // 输出文件名
  },
  module: {
    rules: [
      {
        test: /.js$/, // 匹配.js文件
        use: ['babel-loader'] // 使用babel-loader
      }
    ]
  },
  plugins: [/* 插件配置 */],
  devServer: {/* 开发服务器配置 */},
};

要运行此配置，使用npx webpack或npm run build。这个"webpack demo"可能还包含package.json，用于管理依赖和脚本。结合React、Vue、Angular等Web框架，Webpack能帮助构建高性能的单页应用。通过合理配置和使用Loader、Plugin，Webpack能够有效管理和优化项目资源，提升开发效率和应用性能。

总结来说，"webpack demo"演示了Webpack的基础功能，涉及如何设置入口、输出和加载器，是学习Webpack的关键示例。