{"id":15193912,"url":"https://github.com/srect/webpack","last_synced_at":"2026-03-05T06:32:09.399Z","repository":{"id":114173247,"uuid":"131700508","full_name":"sRect/webpack","owner":"sRect","description":"webpack3.x_demo |  webpack4.x_demo","archived":false,"fork":false,"pushed_at":"2019-03-27T05:13:25.000Z","size":320,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"webpack4.x","last_synced_at":"2025-01-11T18:50:11.806Z","etag":null,"topics":["demo","webpack","webpack3","webpack4"],"latest_commit_sha":null,"homepage":"","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/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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-01T10:24:11.000Z","updated_at":"2019-03-29T10:00:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"2ce70936-4172-423d-bb68-a957f4a18075","html_url":"https://github.com/sRect/webpack","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"3d10f0210b8ff580b57696927d51b5e0531fbacb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sRect%2Fwebpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sRect","download_url":"https://codeload.github.com/sRect/webpack/tar.gz/refs/heads/webpack4.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241314989,"owners_count":19942761,"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":["demo","webpack","webpack3","webpack4"],"created_at":"2024-09-27T22:07:38.822Z","updated_at":"2026-03-05T06:32:09.363Z","avatar_url":"https://github.com/sRect.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack4.x demo\n\u003e webpack4.x demo\n\n## 项目目录结构\n![Image text](https://raw.githubusercontent.com/sRect/webpack3.x_demo/webpack4.x/src/images/screen.png)\n\n\n## 项目配置文件\n1. webpack.base.js\n```javascript\nconst path = require(\"path\");\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ExtractTextPlugin = require('extract-text-webpack-plugin'); // 分离css插件\nconst CleanWebpackPlugin = require('clean-webpack-plugin')\nconst HappyPack = require('happypack'); // node中打包的时候是单线程去一件一件事情的做，HappyPack可以开启多个子进程去并发执行，子进程处理完后把结果交给主进程\n\nmodule.exports = {\n  entry: {\n    index: './src/js/index.js',\n    list: './src/js/list.js'\n  },\n  output: {\n    path: path.join(__dirname, '../dist'),\n    filename: 'js/[name].[hash:20].js',\n  },\n  resolve: {\n    extensions: ['.js', '.jsx', '.less', '.css', '.json'],\n  },\n  // webpack4中废弃了webpack.optimize.CommonsChunkPlugin插件,用新的配置项替代,把多次import的文件打包成一个单独的common.js\n  // optimization: {\n  //   splitChunks: {\n  //     cacheGroups: {\n  //       commons: {\n  //         chunks: 'initial',\n  //         minChunks: 2,\n  //         maxInitialRequests: 5,\n  //         minSize: 2,\n  //         name: 'common'\n  //       }\n  //     }\n  //   }\n  // },\n  module: {\n    rules: [\n      {\n        test: /\\.js?$/,\n        exclude: /node_modules/,\n        use: 'happypack/loader?id=babel'\n      },\n      {\n        test: /\\.css$/,\n        // loader: ['style-loader', 'css-loader']\n        // use: ['style-loader', 'css-loader']\n        use: ExtractTextPlugin.extract({ // 分离css(页面主要是css,js很少)\n          fallback: \"style-loader\",\n          use: \"css-loader\"\n        })\n      },\n      {\n        test: /\\.less$ /,\n        use: ExtractTextPlugin.extract({\n          fallback: 'style-loader',\n          use: ['css-loader', 'less-loader']\n        }),\n        exclude: /node_modules/\n      },\n      {\n        test: /\\.(png|jpg|gif|ttf|eot|woff(2)?)(\\?[=a-z0-9]+)?$/,\n        use: [{\n          loader: 'url-loader',\n          options: {\n            query: {\n              limit: 3000,\n              name: 'images/[name]_[hash:7].[ext]',\n            }\n          }\n        }]\n      }\n    ]\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/html/index.html',     // html模板的路径地址\n      filename: 'html/index.html',                  // 生成的文件名\n      title: 'index',                          // 传入的参数\n      chunks: ['index'],                       // 需要引入的chunk\n      hash: true,                              // 在引入JS里面加入hash值 比如: \u003cscript src='index.js?2f373be992fc073e2ef5'\u003e\u003c/script\u003e\n      minify: {\n        removeAttributeQuotes: true            // 去掉引号，减少文件大小\n      }\n    }),\n    new HtmlWebpackPlugin({\n      template: './src/html/list.html',\n      filename: 'html/list.html',\n      title: 'list',\n      chunks: ['list'],\n      hash: true,\n      minify: {\n        removeAttributeQuotes: true\n      }\n    }),\n    // 需要在plugins里加入插件name: chunk名字 contenthash:8: 根据内容生成hash值取前8位\n    new ExtractTextPlugin('css/[name].css'),\n    // 打包前自动删除dist目录，保证dist目录下是当前打包后的文件\n    new CleanWebpackPlugin([path.join(__dirname, '../dist/*.*')], {\n      root: path.join(__dirname, './dist')\n    }),\n    new HappyPack({\n      id: 'babel',\n      threads: 4,\n      loaders: ['babel-loader']\n    })\n  ]\n}\n```\n2. webpack.dev.js\n```javascript\nconst path = require('path');\nconst webpack = require('webpack');\nconst merge = require('webpack-merge');\nconst base = require('./webpack.base');\n\nconst dev = {\n  devServer: {\n    contentBase: path.join(__dirname, './dist'), // 静态文件地址\n    port: 8080,\n    host: 'localhost',\n    overlay: true, // 如果出错，则在浏览器中显示出错误\n    compress: true, // 服务器返回浏览器的时候是否启动gzip压缩\n    open: true, // 打包完成自动打开浏览器\n    hot: true, // 模块热替换 需要webpack.HotModuleReplacementPlugin插件\n    inline: true, // 实时构建\n    progress: true //  显示打包进度\n  },\n  devtool: 'inline-source-map',\n  plugins: [\n    new webpack.HotModuleReplacementPlugin(),\n    new webpack.NamedModulesPlugin() // 显示模块的相对路径\n  ]\n\n}\n\nmodule.exports = merge(base, dev);\n```\n3. webpack.prod.js\n```javascript\nconst path = require('path');\nconst merge = require('webpack-merge');\nconst WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');\nconst base = require('./webpack.base');\n\nconst prod = {\n  plugins: [\n    new WebpackParallelUglifyPlugin({\n      uglifyJS: {\n        mangle: true, //  是否混淆代码\n        output: {\n          beautify: false, // 代码压缩成一行 true为不压缩 false压缩\n          comments: true // 去掉注释\n        },\n        compress: {\n          warnings: false, //  在删除没用到代码时 不输出警告\n          drop_console: true, //  删除console\n          collapse_vars: true, // 把定义一次的变量，直接使用，取消定义变量\n          reduce_vars: true // 合并多次用到的值，定义成变量\n        }\n      }\n    })\n  ]\n\n}\n\nmodule.exports = merge(base, prod);\n```\n4. webpack.config.js\n```javascript\nconst devModule = require(\"./webpack-config/webpack.dev\")\nconst prodModule = require(\"./webpack-config/webpack.prod\")\n\nlet ENV = process.env.NODE_ENV;     //此处变量可由命令行传入\nlet finalModule = {};\n\nswitch (ENV) {\n  case 'dev':\n    finalModule = devModule;\n    break;\n  case 'prod':\n    finalModule = prodModule;\n    break;\n  default:\n    break;\n}\n\nmodule.exports = finalModule;\n```\n\n5. package.json\n```json\n\"scripts\": {\n  \"server\": \"cross-env NODE_ENV=dev webpack-dev-server --open\",\n  \"dev\": \"cross-env NODE_ENV=dev webpack\",\n  \"prod\": \"cross-env NODE_env=prod webpack\"\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrect%2Fwebpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrect%2Fwebpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrect%2Fwebpack/lists"}