{"id":22283767,"url":"https://github.com/veaba/learn-webpack","last_synced_at":"2025-07-11T09:39:47.222Z","repository":{"id":104582188,"uuid":"166211696","full_name":"veaba/learn-webpack","owner":"veaba","description":"learn-webpack","archived":false,"fork":false,"pushed_at":"2019-08-29T07:04:12.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-30T17:39:41.485Z","etag":null,"topics":[],"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/veaba.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-01-17T11:04:48.000Z","updated_at":"2019-08-29T07:04:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"ab195b23-76fb-4503-9b31-dc5b6d724b0a","html_url":"https://github.com/veaba/learn-webpack","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/veaba%2Flearn-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Flearn-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Flearn-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Flearn-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/veaba","download_url":"https://codeload.github.com/veaba/learn-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245535443,"owners_count":20631294,"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":[],"created_at":"2024-12-03T16:42:06.185Z","updated_at":"2025-03-25T19:51:41.697Z","avatar_url":"https://github.com/veaba.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e 官网中文台滞后后了，推荐印记中文 https://webpack.docschina.org/\n## 学习 webpack\n\n\n## loader css\n\u003e style-loader  css-loader  --save-dev\n\n\n## loader file\n\u003e file-loader --save-dev\n\n## 设置html\n\u003e html-webpack-plugin --save-dev\n\n## 清理out 的文件夹\n\u003e clean-webpack-plugin --save-dev\n\n## source map `只能在dev环境下使用`\n```js\nmodulex.exports={\n    devtool:'inline-source-map'\n}\n```\n## watch ，不手动npm run webpack，文件变化则自动打包\n```json\n\n{\"watch\":\"webpack watch\"}\n\n```\n## webpack-dev-server 实时重新加载\n\u003e webpack-dev-server --save-dev\n启动一个server，ip或者 localhost访问文件有变更自动编译刷新加载。但速度有点慢。。。\n\n## webpack-dev-middleware `但无法在浏览器中自动刷新，只是做了自动watch编译`\n\u003e webpack-dev-middleware\n一个容器，webpack处理后的文件传递给一个服务器，可以被`webpack-dev-server`在内部使用。\n\n## HMR 热更新/热重载\n\u003e 竟然是在内存中生成的dist，目录中看不到，此时hmlt 是又一个插件生产的\n\n## 热更新：node.js API + webpack-dev-server  实现 热重载\n```js\n/**\n * @desc Node.js API情况下使用  webpack-dev-server\n * \n */\nconst webpackDevServer = require('webpack-dev-server');\nconst webpack= require('webpack');\n\nconst config =require('./webpack.config');\n\nconst options = {\n    contentBase:'./dist',\n    hot:true,\n    host:\"localhost\"\n};\nwebpackDevServer.addDevServerEntrypoints(config,options);\nconst compiler = webpack(config);\nconst server = new webpackDevServer(compiler,options);\nserver.listen(5000,'localhost',()=\u003e{\n    console.log('dev server listening on port 5000')\n})\n```\n\n## 自定义模式下 实现热重载：webpack-dev-middleware + webpack-hot-middleware\n\n##  HRM 修改样式表\n\u003e style-loader --save-dev \n\n## module.hot.accept 修补\n\n## tree shaking\n\u003e 依赖es2015模块系统中的静态结构特性，例如`import`，`export`，起于es2015模块打包工具 `rollup`\n\n## webpack打包a、b文件为c\n\na.js文件\n```js\nfunction a() {\n\tconsole.info('hello a');\n}\n\nexport default a\n\n```\n\nb.js文件\n```js\nfunction b() {\n\tconsole.info('hello b');\n}\n\nexport default b\n\n// 导出是b: Object [Module] { default: [Function: b] }，需要访问a.default()才可以\n\n```\n\n\nc.js文件\n\n```js\nconst a =  require('./a');\nconst b = require('./b');\n\n\nconsole.info(\"a:\",a);\nconsole.info(\"b:\",b);\n\nconsole.info(a.default());\n\n\n```\n\nwebpack.config.js\n```js\nconst path = require('path');\nmodule.exports={\n    // entry:'./dist/index.js',\n    entry:'./c.js',\n    target: \"node\",\n    mode:\"development\",\n    resolve:{\n        extensions:['.js']\n    },\n    output:{\n        filename:\"build.js\",\n        // filename:\"axios-ts.js\",\n        path:path.resolve(__dirname,'pro')\n    }\n};\n\n\n```\n原型node文件\n```shell\nnode build.js\n```\n\n发现需要`console.log(a.default())`函数\n\n\n### 总结：webpack 打包出来的文件无法被node require，引用的文件竟然是一个空对象 {}\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveaba%2Flearn-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fveaba%2Flearn-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveaba%2Flearn-webpack/lists"}