{"id":19069582,"url":"https://github.com/srect/webpack4.x_learning","last_synced_at":"2026-05-17T04:30:15.867Z","repository":{"id":42315982,"uuid":"214840272","full_name":"sRect/webpack4.x_learning","owner":"sRect","description":"webapck4.x巩固","archived":false,"fork":false,"pushed_at":"2022-12-11T09:15:35.000Z","size":1298,"stargazers_count":0,"open_issues_count":23,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-02T15:45:21.157Z","etag":null,"topics":["babel7","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sRect.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}},"created_at":"2019-10-13T15:02:46.000Z","updated_at":"2020-05-06T01:35:18.000Z","dependencies_parsed_at":"2023-01-26T20:01:35.175Z","dependency_job_id":null,"html_url":"https://github.com/sRect/webpack4.x_learning","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack4.x_learning","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack4.x_learning/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack4.x_learning/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack4.x_learning/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sRect","download_url":"https://codeload.github.com/sRect/webpack4.x_learning/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240122573,"owners_count":19751142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["babel7","webpack4"],"created_at":"2024-11-09T01:14:49.799Z","updated_at":"2026-05-17T04:30:15.824Z","avatar_url":"https://github.com/sRect.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack4.x + babel7.x\n____\n\u003e ![avatar](https://img.shields.io/badge/webpack-4.41.1-blue.svg) ![avatar](https://img.shields.io/badge/@babel/core-7.6.4-blue.svg)\n\n## package.json\n\u003e 1. npm run dev 开发环境打包\n\u003e 2. npm run server 或者 npm run start 启动本地开发服务\n\u003e 3. npm run build 上线打包\n```json\n{\n  \"scripts\": {\n    \"dev\": \"cross-env NODE_ENV=development webpack\",\n    \"server\": \"cross-env NODE_ENV=development webpack-dev-server\",\n    \"start\": \"npm run server\",\n    \"build\": \"cross-env NODE_ENV=production webpack\"\n  }\n}\n```\n\n## webpack.config.js\n```javascript\nconst base = require('./build/webpack.base'); // webpack公共配置\nconst dev = require('./build/webpack.dev'); // webpack开发配置\nconst prod = require('./build/webpack.prod'); // webpack生产配置\nconst merge = require('webpack-merge');\nconst isDev = process.env.NODE_ENV; // NODE_ENV指定开发或生产的变量\n\nmodule.exports = () =\u003e {\n  console.log(`currentMode:${isDev}`);\n  // let isDev = env.development;\n  return isDev === 'development' ? merge(base, dev) : merge(base, prod);\n}\n```\n\n## 对js处理(对es6+语法转为es5) \n\u003e + babel7.x的3个核心包  @babel/core @babel/preset-env babel-loader\n\u003e + 默认调用@babel/core转换代码，转换的时候用@babel/preset-env转为es5代码\n\u003e + .babelrc中presets的执行顺序是从下往上\n\u003e + .babelrc中plugins的执行顺序是从上往下\n\n### 1. 安装依赖项\n```bash\nnpm install @babel/core @babel/preset-env babel-loader --save-dev # 基本依赖\nnpm install core-js@2 --save # @babel/preset-env option配置项，corejs包\nnpm install @babel/preset-react --save-dev # 解析react jsx预设\nnpm install @babel/plugin-proposal-decorators --save-dev # 解析装饰器语法\nnpm install @babel/plugin-proposal-class-properties --save-dev # 解析class语法\nnpm install @babel/plugin-transform-runtime --save-dev # 去除重复引入，重整代码\nnpm install @babel/runtime --save\nnpm install @babel/plugin-syntax-dynamic-import --savve-dev # 懒加载模块\n```\n### 2. build/webpack.base.js\n```javascript\nmodule.exports = {\n  ...\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        use: 'babel-loader',\n        exclude: /node_modules/\n      },\n    ]\n  }\n  ...\n}\n```\n\n### 3. .babelrc配置文件\n```json\n{\n  \"presets\": [\n    // https://babeljs.io/docs/en/babel-preset-env#docsNav\n    [\"@babel/preset-env\", {\n      \"modules\": false, // 模块使用 es modules ，不使用 commonJS 规范\n      \"useBuiltIns\": \"usage\", // usage-按需引入 entry-入口引入（整体引入） false-不引入polyfill\n      \"corejs\": 2 // 就是以前的babel-polyfill\n    }],\n    \"@babel/preset-react\"\n  ],\n  \"plugins\": [\n    [\"@babel/plugin-proposal-decorators\", { // 解析类的装饰器\n      \"legacy\": true\n    }],\n    [\"@babel/plugin-proposal-class-properties\", { // 解析class语法\n      \"loose\": true\n    }],\n    // https://babeljs.io/docs/en/babel-plugin-transform-runtime#docsNav\n    // 去除重复代码\n    // A plugin that enables the re-use of Babel's injected helper code to save on codesize\n    [\n      \"@babel/plugin-transform-runtime\",\n      {\n        // 上面presets useBuiltIns写了，这里就不用写了\n        // \"corejs\": 2, // you can directly import \"core-js\" or use @babel/preset-env's useBuiltIns option.\n        \"helpers\": true, // 默认\n        \"regenerator\": false, // 通过 preset-env 已经使用了全局的 regeneratorRuntime, 不再需要 transform-runtime 提供的 不污染全局的 regeneratorRuntime\n        \"useESModules\": true // 使用 es modules helpers, 减少 commonJS 语法代码\n      }\n    ],\n    // https://babeljs.io/docs/en/next/babel-plugin-syntax-dynamic-import.html\n    \"@babel/plugin-syntax-dynamic-import\" // 懒加载\n  ]\n}\n```\n\n### 4. webpack.prod.js\n```javascript\nconst OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css\nconst TerserPlugin = require('terser-webpack-plugin'); // 混淆压缩js\n\nmodule.exports = {\n  ...\n  optimization: { // 优化项\n    runtimeChunk: { // 去除相同的webpack的运行文件，减少文件体积\n      name: \"manifest\"\n    },\n    occurrenceOrder: true, // To keep filename consistent between different modes (for example building only)\n    // usedExports: true, // js Tree Shaking\n    // webpack4中废弃了webpack.optimize.CommonsChunkPlugin插件,用新的配置项替代,把多次import的文件打包成一个单独的common.js\n    splitChunks: {\n      chunks: \"all\", // 必须三选一： \"initial\" | \"all\"(推荐) | \"async\" (默认就是async) https://juejin.im/post/5af1677c6fb9a07ab508dabb\n      minSize: 30000, // 最小尺寸，30000\n      minChunks: 1, // 最小 chunk ，默认1\n      maxAsyncRequests: 5, // 最大异步请求数， 默认5\n      maxInitialRequests: 3, // 最大初始化请求数，默认3\n      automaticNameDelimiter: '~',// 打包分隔符\n      cacheGroups: {\n        commons: { // 抽离自己写的公共代码\n          chunks: \"initial\",\n          name: \"common\", // 打包后的文件名，任意命名\n          minChunks: 2, //最小引用2次\n          maxInitialRequests: 5,\n          minSize: 0 // 只要超出0字节就生成一个新包\n        },\n        vendor: { // 抽离第三方插件\n          test: /node_modules/, // 指定是node_modules下的第三方包\n          chunks: 'initial',\n          minChunks: 1,\n          maxInitialRequests: 5,\n          minSize: 2,\n          name: 'vendor', // 打包后的文件名，任意命名\n          priority: 10, // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包\n          enforce: true\n        }\n        // 'vendor-pageA': {\n        //   test: /tween/, // 直接使用 test 来做路径匹配\n        //   chunks: \"initial\",\n        //   name: \"vendor-pageA\",\n        //   enforce: true,\n        // },\n        // 'vendor-pageB': {\n        //   test: /moment/,\n        //   chunks: \"initial\",\n        //   name: \"vendor-pageB\",\n        //   enforce: true,\n        // }\n      }\n    },\n    minimizer: [ // 放置压缩方案\n      // 压缩css(注意：配置了css压缩后，也要手动配置js的压缩，不配置js就不压缩了)\n      new OptimizeCssAssetsPlugin(), \n      // https://www.npmjs.com/package/terser-webpack-plugin\n      new TerserPlugin({\n        test: /\\.js(\\?.*)?$/i,\n        exclude: /node_modules/,\n        cache: true,\n        parallel: true,\n        sourceMap: true,\n        terserOptions: {\n          ecma: undefined,\n          warnings: false,\n          parse: {},\n          compress: {\n            drop_console: true,\n            drop_debugger: true\n          },\n          mangle: true, // true/false 是否混淆变量名\n          module: false,\n          output: null,\n          toplevel: false,\n          nameCache: null,\n          ie8: false,\n          keep_classnames: undefined,\n          keep_fnames: false,\n          safari10: false,\n        },\n      }),\n    ]\n  }\n  ...\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrect%2Fwebpack4.x_learning","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrect%2Fwebpack4.x_learning","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrect%2Fwebpack4.x_learning/lists"}