{"id":16530541,"url":"https://github.com/freeshineit/react-webpack-dll","last_synced_at":"2026-05-05T22:33:20.413Z","repository":{"id":71966555,"uuid":"143852258","full_name":"freeshineit/react-webpack-dll","owner":"freeshineit","description":"react project","archived":false,"fork":false,"pushed_at":"2019-04-03T15:05:31.000Z","size":2154,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-03T09:15:12.578Z","etag":null,"topics":["dll-plugin","react","react-dom","react-router","webpack4","webpackdllbuild"],"latest_commit_sha":null,"homepage":"","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/freeshineit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-08-07T09:40:54.000Z","updated_at":"2019-05-06T09:29:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"5dfee7ce-858f-4731-9745-f2239d1d32ec","html_url":"https://github.com/freeshineit/react-webpack-dll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/freeshineit/react-webpack-dll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freeshineit%2Freact-webpack-dll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freeshineit%2Freact-webpack-dll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freeshineit%2Freact-webpack-dll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freeshineit%2Freact-webpack-dll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freeshineit","download_url":"https://codeload.github.com/freeshineit/react-webpack-dll/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freeshineit%2Freact-webpack-dll/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259787671,"owners_count":22911260,"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":["dll-plugin","react","react-dom","react-router","webpack4","webpackdllbuild"],"created_at":"2024-10-11T18:06:17.367Z","updated_at":"2026-05-05T22:33:20.385Z","avatar_url":"https://github.com/freeshineit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#  React webpack dll 优化\n\n## install\n\n```sh\ngit clone git@github.com:freeshineit/react-webpack-dll.git\n\ncd react-webpack-dll\n\nnpm install\n\n#或者\n\nyarn install \n\n# 开发环境\nnpm run dev\n\n# 单独打包依赖包文件， 一次打包全局使用， 当包更新时需重新打包\nnpm run dll \n\n# 生产环境\nnpm run build\n\n```\n\n## structure\n```\n.\n├── build\n│   ├── config.js\n│   ├── index.js\n│   ├── lib\n│   ├── webpack.base.js\n│   ├── webpack.dev.config.js\n│   ├── webpack.dll.config.js\n│   ├── webpack.plugins.js\n│   └── webpack.prod.config.js\n├── dist\n│   ├── app.deac0144e9956c30ca85.css\n│   ├── app_deac0144e9956c30ca85.js\n│   ├── images\n│   ├── index.html\n│   ├── manifest.json\n│   └── vendor.d0390cca802aaa5fdfb2.js\n├── public\n│   └── index.html\n├── src\n│   ├── Root.jsx\n│   ├── containers\n│   ├── index.js\n│   └── public\n├── package.json\n├── LICENSE\n├── README.md\n└── yarn.lock\n```\n\n+   `build` webpack4配置\n    +   `config.js` -- 全局变量\n    +   `index.js` -- 生产环境编译入口\n    +   `lib` -- webpack 的`DllPlugin`处理公共包时生成的`manifest.json`\n    +   `webpack.base.js` -- 公共配置\n    +   `webpack.dev.config.js` -- 开发环境配置\n    +   `webpack.dll.config.js` -- 生产环境单独打包公共包配置\n    +   `webpack.prod.config.js` -- 生存环境的配置\n\n+   `dist` 生产环境打包生成的文件夹，静态资源。\n    +   `app.[hash].css` -- 编译生成的样式表文件\n    +   `app.[hash].js` -- 编译生成的js文件\n    +   `images` -- 静态资源图片\n    +   `index.html` -- 页面入口\n    +   `manifest.json` -- 最新css、js文件的路径的映射\n    +   `vendor.[hash].js`  -- 公共包打包生成的文件\n\n+   `public` 存放模版文件\n    +   `index.html` -- html模版\n\n+   `src` 源码\n    +   `Root.jsx` -- Root组件\n    +   `containers` -- 页面组件文件夹\n    +   `index.js` -- 入口组件\n    +   `public` -- 公共资源文件夹\n\n\n## webpack\n\n`webpack` 配置都在`build`文件夹下\n\n+   `webpack.dev.config.js`\n\n    +   loader配置\n\n            ```js\n            module: {\n                rules: [\n                    {\n                        test: /\\.jsx?$/,\n                        exclude: /node_modules/,\n                        use: ['babel-loader?cacheDirectory', 'eslint-loader']\n                    },\n                    {\n                        test: /\\.less|css$/,\n                        loader: ExtractTextPlugin.extract({\n                            fallback: 'style-loader',\n                            use: ['css-loader', `less-loader?{\"sourceMap\":true}`]\n                        }),\n                    },\n                    {\n                        test: /\\.(png|jpg|gif|svg)$/,\n                        use: [{\n                            loader: 'file-loader',\n                            options: {\n                                name: '[name].[ext]',\n                            }\n                        }]\n                    },\n                    {\n                        test: [/\\.bmp$/, /\\.gif$/, /\\.jpe?g$/, /\\.png$/],\n                        loader: 'url-loader',\n                        options: {\n                            limit: 10000,\n                            name: 'static/media/[name].[ext]',\n                        },\n                    },\n                ]\n            }\n            ```\n\n    +   plugins\n\n            ```js\n            plugins: [\n                new HtmlWebPackPlugin({\n                    template: \"public/index.html\",\n                    filename: \"index.html\",\n                    env: 'development'\n                }),\n                new webpack.NamedModulesPlugin(),\n                new webpack.HotModuleReplacementPlugin(),\n                new webpack.DefinePlugin({\n                    'process.env.NODE_ENV': '\"development\"'\n                }),\n                new ExtractTextPlugin({\n                    filename: '[name].css'\n                })\n            ]\n            ```\n\n+   `webpack.dll.config.js` \n\n    +   plugins\n\n            ```js\n            plugins: [\n                new webpack.DllPlugin({\n                    path: path.resolve(ROOT_PATH, 'lib', 'manifest.json'),\n                    name: '[name]_lib',\n                    context: ROOT_PATH,\n                }),\n                new ManifestPlugin({ // 生成manifest.json文件 \n                    fileName: manifestPath,\n                    generate: (seed, files) =\u003e files.reduce((manifest, {\n                        name,\n                        path\n                    }) =\u003e {\n                        manifest[name] = path\n                        return Object.assign(manifest, _manifest);\n                    }, seed)\n                })\n            ]\n            ```\n\n+   `webpack.prod.config.js`\n\n    +   plaugins\n    \n        ```js\n        plugins: [\n            new HtmlWebPackPlugin({\n                template: \"public/index.html\",\n                filename: \"index.html\",\n                env: 'production',\n                minify: true,\n                vendor: _manifest[`${[config.pro.vendor]}.js`]\n            }),\n            new webpack.DllReferencePlugin({\n                manifest: require(path.resolve(__dirname, 'lib', 'manifest.json')),\n                context: path.resolve(__dirname),\n            }),\n            new ExtractTextPlugin({\n                filename: '[name].[hash].css',\n                disable: false,\n                allChunks: true\n            }),\n            new ManifestPlugin({ // 生成manifest.json文件 \n                fileName: manifestPath,\n                generate: (seed, files) =\u003e files.reduce((manifest, {\n                    name,\n                    path\n                }) =\u003e {\n                    const pathMatch = path.match(/\\.(js|css)$/);\n                    if (pathMatch)\n                        manifest[name] = path\n                    return Object.assign(manifest, _manifest);\n                }, seed)\n            })\n        ]\n        ```\n\n## webpack-dev-server\n\n在开发环境中使用`webpack-dev-server`，用来开启一个本地服务。\n\n1. 安装依赖\n\n    ```sh\n    npm install webpack-dev-server --save-dev\n    ```\n\n2. 环境配置（[webpack.dev.config.js](./build/webpack.dev.config.js)）\n\n    ```js\n    devServer: {\n        // contentBase: '', //默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到\"build\"目录）\n        historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html\n        // compress: true,   // 开启gzip压缩\n        hot: true,\n        host: '0.0.0.0',  // 同一局域网段下，可以通过IP访问\n        inline: true, //设置为true，当源文件改变时会自动刷新页面\n        port: config.dev.port, //设置默认监听端口，如果省略，默认为\"8083\"\n        proxy: {    // 设置代理解决跨域问题\n            // '/': {\n            //     target: 'http://localhost:8083/', // 目标服务器地址\n            //     secure: false,\n            //     withCredentials: true\n            // }\n        }\n    }\n    ```\n\n## eslint\n\n1. 安装依赖\n\n    ```sh\n    npm install babel-eslint eslint eslint-plugin-react eslint-loader --save-dev\n    ```\n2. 在根目录下创建[.eslintrc.json](./.eslintrc.json)文件，添加eslint语法检查规则\n\n3. 在`webpack.dev.config.js`配置`eslint-loader`\n\n    ```js\n    rules: [\n        {\n            test: /\\.jsx?$/,\n            exclude: /node_modules/,\n            use: ['babel-loader?cacheDirectory', 'eslint-loader']\n        },\n        ...\n    ]\n    ```\n## babel-plugin-root-import\n\n为了组件的引用方便,项目使用了`babel-plugin-root-import`插件。其配置在[.babelrc](./.babelrc)文件中。\n\n`src/containers/children.js`\n\n```jsx\nimport Data from '~/containers/Data';\nimport Home from '~/containers/Home';\nexport {\n    Home,\n    Data\n};\n```\n\n## antd\n\n```sh\nnpm i antd\n\nnpm i babel-plugin-import --save-dev\n```\n\n\n### config\n\n在`.babelrc`中添加插件\n\n```json\n\"plugins\": [\n    [\n         \"import\",\n        {\n            \"libraryName\": \"antd\",\n            \"libraryDirectory\": \"es\",\n            \"style\": true\n        }\n    ]\n]\n```\n\n配置主题,创建一个主题配置文件`less.js`\n\n\n```js\nmodule.exports = {\n    'primary-color': '#f34949',\n    'link-color': '#1DA57A',\n    'border-radius-base': '2px',\n    'font-size-base': '12px',\n};\n```\n\n`webpack`配置\n\n```js\n{\n    test: /\\.less$/,\n    loader: ExtractTextPlugin.extract({\n        fallback: 'style-loader',\n        use: [\n            'css-loader',\n            { \n                loader: `less-loader?{\"sourceMap\":true,\"modifyVars\":${JSON.stringify(theme)}}`,\n                options: {\n                    javascriptEnabled: true // less@3.x.x\n                }\n            }\n        ]\n    }),\n}\n```\n\n注意️⚠️：\n\n```js\nresolve: {\n    extensions: [\n        '.mjs',\n        '.web.js',\n        '.js',\n        '.json',\n        '.web.jsx',\n        '.jsx',\n        '.less',\n        '.js',\n        '.css'\n    ]\n}\n```\n\n具体代码请切换到`feature/antd`分支\n\n## material\n\n```sh\n## 安装material-ui@1.x.x\nnpm install @material-ui/core\n\n## 如果要使用icons\nnpm install @material-ui/icons\n\n```\n\n具体代码请切换到`feature/material`分支\n\n\n## License\n\nMIT © [Shine Shao](https://github.com/freeshineit)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreeshineit%2Freact-webpack-dll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreeshineit%2Freact-webpack-dll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreeshineit%2Freact-webpack-dll/lists"}