{"id":20669068,"url":"https://github.com/jackchoumine/webpack-practice","last_synced_at":"2026-04-17T20:32:09.411Z","repository":{"id":39550185,"uuid":"181683336","full_name":"jackchoumine/webpack-practice","owner":"jackchoumine","description":"webpack4练习","archived":false,"fork":false,"pushed_at":"2023-03-04T03:36:15.000Z","size":4101,"stargazers_count":1,"open_issues_count":12,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-17T16:09:25.254Z","etag":null,"topics":["webpack","webpack4"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jackchoumine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-16T12:17:54.000Z","updated_at":"2023-03-08T02:52:14.000Z","dependencies_parsed_at":"2025-01-17T13:28:47.065Z","dependency_job_id":"aaa2699e-4b73-4e9c-81f1-1e39231e361e","html_url":"https://github.com/jackchoumine/webpack-practice","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jackchoumine/webpack-practice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackchoumine%2Fwebpack-practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackchoumine%2Fwebpack-practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackchoumine%2Fwebpack-practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackchoumine%2Fwebpack-practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jackchoumine","download_url":"https://codeload.github.com/jackchoumine/webpack-practice/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackchoumine%2Fwebpack-practice/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31945004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T17:29:20.459Z","status":"ssl_error","status_checked_at":"2026-04-17T17:28:47.801Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webpack","webpack4"],"created_at":"2024-11-16T20:12:48.440Z","updated_at":"2026-04-17T20:32:09.364Z","avatar_url":"https://github.com/jackchoumine.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack 核心概念\n\nwebpack 是一个`模块打包器`，即将前端项目里的 js 文件、样式文件和图片等资源作为模块，经过 webpack 处理后，输出生产线上部署的代码。\n\n![](https://tva1.sinaimg.cn/large/e6c9d24egy1h0yy0tonz9j21x60t8ad9.jpg)\n\n使用它的好处：\n\n1. 实现项目模块化：把 css 图片等当成模块，方便管理等；\n2. 优化压缩代码：让代码体积更小；\n3. 转化语法：将浏览器不支持的 JS 语法，sass 等语法转成浏览器支持的语法等。\n\n其他好处...\n\n\u003e 招聘要求的中前端构建是什么？\n\n前端构建：将浏览器不能支持的代码（比如用 ES6 语法、使用框架开发）转换成**浏览器支持**的 JS、CSS 和 HTML 代码等。\n\n主要包括以下内容：\n\n- 模块合并：模块化开发的项目，会合成一个文件，减少请求；\n- 代码转化：将 TypeScript、ES6 等浏览器不支持的代码，转换成 JS；CSS 扩展语言转为 CSS 、添加前缀等；\n- 文件优化：压缩代码，合成图片等；\n- 代码分割：提交公共代码；\n- 自动刷新：监听代码变化，自动刷新，提升开发体验；\n- 代码校验：测试代码是否符合规范等。\n\n\u003e 为何需要前端构建？\n\n由于历史遗留、浏览器厂商相互竞争等原因，浏览器对 js、css 等新的前端技术的支持，总是落后于标准，导致前端开发一直比较**缺乏工程化**手段，随着前端项目日益复杂，以前没有工程化的开发方式难以管理了，node 和 webpack 的出现，让前端开发具备了更好的工程化手段，能解决前端开发的诸多难题。\n\nwebpack 的优点：\n\n- 零配置（**webpack4 新增特性**），也即可在 npm script 中指定入口和出口文件，默认生产模式；\n- 实现前端模块化开发；\n- 支持 Plugin 扩展，灵活；\n- 不局限于 web 开发，还可以打包 js 库等；\n- 社区活跃，维护活跃，经常引入新特性；\n- 开发体验好。\n\n缺点：配置项多，配置起来繁琐。\n\n## 入口\n\nwebpack 以哪个文件为起点开始打包、构建依赖图。\n\n单入口：一个字符串：\n\n```js\nmodule.exports = {\n  entry: 'path/file.js',\n}\n```\n\n多入口：一个对象\n\n```js\nmodule.exports = {\n  entry: { app: 'path/app.js', adminApp: 'path/adminApp.js' },\n}\n```\n\n还可以配置**数组**形式的入口，用得少。\n\n## 出口\n\n指定打包后的输出位置。\n\n```js\nconst { resolve } = required('path')\nmodule.exports = {\n  entry: 'path/file.js',\n  output: {\n    path: resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n}\n```\n\n多入口\n\n```js\nconst { resolve } = required('path')\nmodule.exports = {\n  entry: { app: 'path/app.js', search: 'path/search.js' },\n  output: {\n    path: resolve(__dirname, 'dist'),\n    filename: '[name].js', //使用 name 占位 app、search\n  },\n}\n```\n\n## 模式\n\nmode 设置成`development`、`production`、`none`，webpack 会根据环境开启某些优化。\n\ndevelopment `process.env.NODE_ENV` 设置成 development，启用 NamedChunksPlugin NamedModulesPlugin。\n\nproduction 启用 TerserPlugin SideEffectsFlagPlugin 等。\n\nnone 不启用任何优化项\n\n命令行：`webpack --mode=production`\n\n[更多关于模式 (mode)](https://www.webpackjs.com/concepts/mode/)\n\n通过 `mode` 选项配置环境，不同的环境配置 webpack 采用不同的构建策略。\n\n| 值          | 策略                                                                                                                                                                                                                                                            |\n| :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| development | 设置`process.env.NODE_ENV` 为`development`。开启`NamedChunksPlugin`、`NamedModulesPlugin`                                                                                                                                                                       |\n| production  | 设置`process.env.NODE_ENV` 为`production`。开启`FlagDependencyUsagePlugin`、`FlagIncludeChunksPlugin`、`ModuleConcatenationPlugin (scope hoisting,优化模块引入方式)`、`NoEmitOnErrorPlugin`、`OccurrenceOrderPlugin`、`SideEffectsFlagPlugin`、`TerserPlugin`等 |\n| none        | 不开启任何优化                                                                                                                                                                                                                                                  |\n\n\u003e 可设置 mode 为 none，然后手动开启相关优化，实际开发中不建议这么干。\n\n`webpack.optimize.ModuleConcatenationPlugin` scope hoisting 优化模块包裹。\n\n## loader --- 处理特定文件（模块）的利器\n\nwebpack 只能处理 JS 和 JSON 文件，项目里的其他的文件通过 loader 处理。\n\n\u003e loader 是一个函数，接收一个文件作为参数，返回转换的结果。 **loader 是链式调用的，处理同一文件，后面的 loader 先调用。**\n\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.txt$/, // 指定处理的文件,一个正则匹配文件扩展名\n        use: 'raw-loader', // 使用的loader\n        options: {}, // loader 配置\n        include: resolve(__dirname, 'src'), // 一个绝对路径或者绝对路径的数组，制定需要处理的范围\n        exclude: resolve(__dirname, 'node_modules'), // 排除不需要的处理的目录\n      },\n    ]\n  }\n}\n```\n\n常用 loader\n\n![](https://tva1.sinaimg.cn/large/e6c9d24egy1h11h3dgiypj21jl0u0thn.jpg)\n\n## 插件\n\n优化 bundle、资源管理、环境变量注入等。\n\n作用于整个构建过程，loader 作用某个文件某个阶段。\n\n```js\n{\n  plugins: [new webpackPlugin()]\n}\n```\n\n## webpack 零配置\n\nwebpack 功能非常强大，但是缺点是配置项非常多，从 webpack 4 开始，支持零配置，开箱即用。\n\n`不需要编写 webpack.config.js`，其默认入口为何出口如下。\n\n```js\nmodule.exports = {\n  entry: './src/index.js',\n  output: './dist/main.js',\n}\n```\n\n零配置只能处理简单的项目，复杂项目还是需要手动配置。\n\n一份比较完整的 `webpack.config.js` 可能包含这些选项：\n\n```js\nmodule.exports = {\n  entry:'',\n  output:{},\n  mode:'',\n  devtool:'',//开发工具配置\n  module:{rules:[]},// loader 配置\n  plugins:[]// 插件配置\n  devServer:{},// 开发服务器配置\n}\n```\n\n其他配置的用法后续逐渐介绍。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackchoumine%2Fwebpack-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjackchoumine%2Fwebpack-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackchoumine%2Fwebpack-practice/lists"}