脚本宝典收集整理的这篇文章主要介绍了

webpack4+react多页面架构

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html,webpack-react-multi-page架构让你可以实现多页面架构,在项目开发中保证每个页面都可以热更新并且打包后有清晰的文件层次结构。</p> <h2 id="articleHeader0"><a href="https://github.com/leinov/webpack-react-multi-page" rel="nofollow noreferrer" target="_blank">Github地址</a></h2> <h2 id="articleHeader1">项目架构</h2> <h3 id="articleHeader2">技术使用</h3> <ul> <li><code>react16</code></li> <li> <p><code>webpack4</code></p> <ul> <li><code>html-webpack-plug<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a> 生成html文件</code></li> <li><code>m<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>i-css-extract-<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a> css分离打包</code></li> <li><code>ugl<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>yjs-webpack-<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a> js压缩</code></li> <li><code>optimize-css-assets-webpack-<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a> css压缩</code></li> </ul> </li> <li><code><a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a></code></li> <li><code><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a></code></li> <li> <p><code><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a> </code></p> <ul> <li><code>opn 打开浏览器</code></li> <li><code>compression 开启gzip压缩</code></li> <li><code>express</code></li> </ul> </li> <li><code>git</code></li> </ul> <h3 id="articleHeader3">目录结构<a href="https://github.com/leinov/webpack-react-multi-page" rel="nofollow noreferrer" target="_blank">github</a><br /> </h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="|-- webpack-react-multi-page //项目 |-- dist //编译生产目录 |-- index |-- index.css |-- index.js |-- about |-- about.css |-- about.js |-- images |-- index.html |-- about.html |-- node_modules //node包 |-- src //开发目录 |-- index //index页面打包入口 |-- images/ |-- app.js// index业务js |-- index.scss |-- index.js //index页面js入口 |-- about //about页面打包入口 |-- images/ |-- app.js// about业务js |-- index.scss |-- index.js //about页面js入口 |-- template.html // html模板 |-- style.scss //公共scss |-- webpackConfig //在webpack中使用 |-- getEntry.js //获取入口 |-- getFilepath.js //遍历文件夹 |-- htmlconfig.js //每个页面html注入数据 |-- package.json |-- .gitignore |-- webpack.config.js //webpack配置文件 |-- www.js //生产启动程序" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>|<span class="hljs-comment">-- webpack-react-multi-page //项目</span> |<span class="hljs-comment">-- dist //编译生产目录</span> |<span class="hljs-comment">-- <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex</span> |<span class="hljs-comment">-- index.css</span> |<span class="hljs-comment">-- index.js</span> |<span class="hljs-comment">-- about</span> |<span class="hljs-comment">-- about.css</span> |<span class="hljs-comment">-- about.js</span> |<span class="hljs-comment">-- <a href="http://www.js-code.com/tag/images" title="浏览关于“images”的文章" target="_blank" class="tag_link">images</a></span> |<span class="hljs-comment">-- index.html</span> |<span class="hljs-comment">-- about.html</span> |<span class="hljs-comment">-- <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules //node包</span> |<span class="hljs-comment">-- src //开发目录</span> |<span class="hljs-comment">-- index //index页面打包入口</span> |<span class="hljs-comment">-- <a href="http://www.js-code.com/tag/image" title="浏览关于“image”的文章" target="_blank" class="tag_link">image</a>s/</span> |<span class="hljs-comment">-- app.js// index业务js</span> |<span class="hljs-comment">-- index.scss</span> |<span class="hljs-comment">-- index.js //index页面js入口</span> |<span class="hljs-comment">-- about //about页面打包入口</span> |<span class="hljs-comment">-- images/</span> |<span class="hljs-comment">-- app.js// about业务js</span> |<span class="hljs-comment">-- index.scss</span> |<span class="hljs-comment">-- index.js //about页面js入口</span> |<span class="hljs-comment">-- template.html // html模板 </span> |<span class="hljs-comment">-- style.scss //公共scss</span> |<span class="hljs-comment">-- webpackConfig //在webpack中使用</span> |<span class="hljs-comment">-- getEn<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a>.js //获取入口</span> |<span class="hljs-comment">-- getFilepath.js //遍历文件夹</span> |<span class="hljs-comment">-- htmlconfig.js //每个页面html注入数据</span> |<span class="hljs-comment">-- <a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a>.json</span> |<span class="hljs-comment">-- .gitignore</span> |<span class="hljs-comment">-- webpack.config.js //webpack配置文件</span> |<span class="hljs-comment">-- www.js //生产启动程序</span></code></pre> <h2 id="articleHeader4">wiki</h2> <h3 id="articleHeader5">webpack单页面打包配置</h3> <ul> <li>webpack.config.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = (env, argv) => ({<br /> entry: &quot;.src/index.js&quot;,<br /> output: {<br /> path: path.join(__dirname, &quot;dist&quot;),<br /> filename: &quot;bundle.js&quot;<br /> },<br /> module: {<br /> rules: [<br /> ...<br /> ],<br /> },<br /> plugins: [<br /> new HtmlWebpackPlugin({<br /> title: &quot;首页&quot;,<br /> filename:&quot;index.html&quot;,<br /> favicon:&quot;&quot;,<br /> template: &quot;./src/template.html&quot;,<br /> })<br /> ]<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = <span class="hljs-function">(<span class="hljs-params">env, argv</span>) =&gt;</span> ({ entry: <span class="hljs-string">".src/index.js"</span>, output: { path: path.join(__dir<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>, <span class="hljs-string">"dist"</span>), filename: <span class="hljs-string">"bundle.js"</span> }, <span class="hljs-keyword">module</span>: { rules: [ ... ], }, plugins: [ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> HtmlWebpackPlugin({ title: <span class="hljs-string">"首页"</span>, filename:<span class="hljs-string">"index.html"</span>, favicon:<span class="hljs-string">""</span>, template: <span class="hljs-string">"./src/template.html"</span>, }) ] });</code></pre> <p>这样就可以在<code>dist</code>文件夹下打包出一个下面这样的文件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <title>首页</title><br /> <body></p> <div id=&quot;root&quot;></div> <p> <script type=&quot;text/javascript&quot; src=&quot;bundle.js&quot;></script><br /> </body><br /> </html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"root"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"bundle.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <h3 id="articleHeader6">webpack多页面打包配置</h3> <p>webpack 的en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a>支持两种种格式</p> <h4>打包单个文件</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = { entry: '.src/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>module.exports = { entry: <span class="hljs-string">'.src/file.js'</span>, <span class="hljs-built_in">output</span>: { <span class="hljs-built_in">path</span>: <span class="hljs-built_in">path</span>.resolve(__dirname, <span class="hljs-string">'dist'</span>), filename: <span class="hljs-string">'bundle.js'</span> } };</code></pre> <p>在dist下打包出一个bundle.js</p> <h4>打包出多个文件</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = { entry: { index:&quot;./src/index.js&quot;, about:&quot;./src/about.js&quot; }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' } };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>module.exports = { entry: { index:<span class="hljs-string">"./src/index.js"</span>, about:<span class="hljs-string">"./src/about.js"</span> }, <span class="hljs-built_in">output</span>: { <span class="hljs-built_in">path</span>: <span class="hljs-built_in">path</span>.resolve(__dirname, <span class="hljs-string">'dist'</span>), filename: <span class="hljs-string">'[name].js'</span> } };</code></pre> <p>上面在dist下打包出两个与en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a>属性名对应的index.js,about.js这两个文件</p> <h4>将每个js挂载到相应的html文件上</h4> <p>这里我们需要用到<code>html-webpack-plugin</code>这个webpack插件,每添加一个页面就需要在plugins添加一个<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> HtmlWebpackPlugin({....})</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;); module.exports = (env, argv) => ({<br /> entry: {<br /> index:&quot;./src/index.js&quot;,<br /> about:&quot;./src/about.js&quot;<br /> },<br /> output: {<br /> path: path.resolve(__dirname, 'dist'),<br /> filename: '[name].js'<br /> }<br /> ....//其他配置<br /> plugins: [<br /> new HtmlWebpackPlugin(<br /> {<br /> filename:&quot;index.html&quot;,//生成的index.html<br /> template: &quot;./src/template.html&quot;,}) //模板<br /> chunks:[&quot;index&quot;]<br /> }),<br /> new HtmlWebpackPlugin(<br /> {<br /> filename:&quot;about.html&quot;,//生成的index.html<br /> template: &quot;./src/template.html&quot;,}) //模板<br /> chunks:[&quot;about&quot;]<br /> })<br /> ]<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> HtmlWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">"html-webpack-plugin"</span>); <span class="hljs-built_in">module</span>.exports = <span class="hljs-function">(<span class="hljs-params">env, argv</span>) =&gt;</span> ({ entry: { index:<span class="hljs-string">"./src/index.js"</span>, about:<span class="hljs-string">"./src/about.js"</span> }, output: { path: path.resolve(__dirname, <span class="hljs-string">'dist'</span>), filename: <span class="hljs-string">'[name].js'</span> } ....<span class="hljs-comment">//其他配置</span> plugins: [ <span class="hljs-keyword">new</span> HtmlWebpackPlugin( { filename:<span class="hljs-string">"index.html"</span>,<span class="hljs-comment">//生成的index.html</span> template: <span class="hljs-string">"./src/template.html"</span>,}) <span class="hljs-comment">//模板</span> chunks:[<span class="hljs-string">"index"</span>] }), <span class="hljs-keyword">new</span> HtmlWebpackPlugin( { filename:<span class="hljs-string">"about.html"</span>,<span class="hljs-comment">//生成的index.html</span> template: <span class="hljs-string">"./src/template.html"</span>,}) <span class="hljs-comment">//模板</span> chunks:[<span class="hljs-string">"about"</span>] }) ] })</code></pre> <blockquote><p> <code>html-webpack-plugin</code>会通过<code>template.html</code>模板生成对应的file<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>名的html文件,并一并打包到output中对应的文件夹下,注意,所有打包的文件都是对应到output中<code>path</code>这个目录下,也包括html。这里的<code>chunks</code>需要注意,它是确定该html需要引入哪个js,如果没写的话,默认会引出所有打包的js,当然这不是我们想要的。</p></blockquote> <p>上面的配置最终可以在dist下打包出下面的文件结构</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="|-- dist |-- index.js |-- about.js |-- index.html //内挂载index.js |-- about.html //内挂载about.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>|<span class="hljs-comment">-- dist</span> |<span class="hljs-comment">-- index.js</span> |<span class="hljs-comment">-- about.js</span> |<span class="hljs-comment">-- index.html //内挂载index.js</span> |<span class="hljs-comment">-- about.html //内挂载about.js</span></code></pre> <p>通过上面这样的配置,再加上devServer,我们已经可以实现多页面的配置开发了,但这样很不智能,因为你每增加一个页面,就要在wepback里面配置一次,会非常繁琐,所以我们来优化下,让我们只专注于开发页面,配置交给webpack.</p> <h4>wehbpack多页面配置优化</h4> <p>我们看下src下面的文件结构</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="|-- src |-- index |-- app.js |-- index.scss |-- index.js |-- about |-- app.js |-- index.scss |-- index.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>|<span class="hljs-comment">-- src</span> |<span class="hljs-comment">-- index</span> |<span class="hljs-comment">-- app.js</span> |<span class="hljs-comment">-- index.scss</span> |<span class="hljs-comment">-- index.js</span> |<span class="hljs-comment">-- about</span> |<span class="hljs-comment">-- app.js</span> |<span class="hljs-comment">-- index.scss</span> |<span class="hljs-comment">-- index.js</span></code></pre> <p>src下面每个文件夹对应一个html页面的js业务,如果我们直接把文件夹对应入口js找到并把他们合并生成对应的entry,那是不是就不用手动写entry了呢,再把对应的html-webpack-plugin通过src下目录遍历出来,就可以生成对应的页面。</p> <p>这样一个完整的多页面架构配置就完成了,完整代码参考项目<a href="https://github.com/leinov/webpack-react-multi-page" rel="nofollow noreferrer" target="_blank">code</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

webpack4+react多页面架构

全部内容,希望文章能够帮你解决

webpack4+react多页面架构

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过