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

WebPack在多页应用项目中的探索

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">WebPack在项目配置中的探索(持续更新中)</h2> <blockquote> <ul> <li> <p>webpack + gulp + vue (th<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>kPHP后台配置)</p> </li> </ul> </blockquote> <h2 id="articleHeader1">一、项目需求(请认真看目录结构,项目构建很大都基于目录来的)</h2> <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="--- Application |--- Home | |--- View (线上用户访问的.html目录) --- Public (线上资源文件目录) |--- js |--- images |--- css |--- ... --- source (前端开发目录) |--- index (一个业务需求模块,每个业务需求模块下会有很多页面) | |--- index (index 页面) | | |--- images | | |--- index.html | | |--- app.vue | | |--- index.js | | |--- style.scss | | |--- ... | |--- topics (topics 页面) | | |--- images | | |--- topics.html | | | ... |--- crowd (另外一个业务需求模块,每个业务需求模块下会有很多页面) | |--- index | | |--- index.html " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">--- Application |--- Home | |--- View (线上用户访问的.html目录) --- Public (线上资源文件目录) |--- js |--- <a href="http://www.js-code.com/tag/images" title="浏览关于“images”的文章" target="_blank" class="tag_link">images</a> |--- css |--- ... --- source (前端开发目录) |--- <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex (一个业务需求模块,每个业务需求模块下会有很多页面) | |--- index (index 页面) | | |--- <a href="http://www.js-code.com/tag/image" title="浏览关于“image”的文章" target="_blank" class="tag_link">image</a>s | | |--- index.html | | |--- app.vue | | |--- index.js | | |--- style.scss | | |--- ... | |--- <a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>ics (topics 页面) | | |--- images | | |--- topics.html | | | ... |--- crowd (另外一个业务需求模块,每个业务需求模块下会有很多页面) | |--- index | | |--- index.html </code></pre> <p>以上是我们的一个项目结构</p> <blockquote> <ul> <li> <p>1.我所想要的是每一个业务需求模块下(source/<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex)会有很多页面</p> </li> <li> <p>每一个页面都是一个文件夹(source/index/index,source/index/<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>ics)</p> </li> <li> <p>2.项目无需后台环境浏览器可以直接打开访问</p> </li> <li> <p>3.每个页面资源如.sass文件,.js文件等就近维护,用.vue + <a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>的形式进行组件模块化的开发</p> </li> <li> <p>4.开发时拥有良好的sourse<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>调试</p> </li> <li> <p>5.当我们不需要这个业务模块,或者某个页面的时候可以直接删除整个文件夹即可</p> </li> </ul> </blockquote> <p>webpack会帮助我们会为每一个页面生成他自己的css文件,js文件. </p> <p>由于是多页应用,在这我的html都是手动创建的(还没找到什么好的解决办法),所以我们直接在我们的index页面里<a href="http://www.js-code.com/tag/link" title="link" target="_blank">link</a>和script他们</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>=" <link rel=&quot;stylesheet&quot; href=&quot;../../../Public/css/index/index.css&quot;> <script src=&quot;../../../Public/js/index/index.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a></span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../../Public/css/index/index.css"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../../Public/js/index/index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>当我们需要上线的时候在用gulp把相对路径给替换成线上路径</p> <h2 id="articleHeader2">二、webpack</h2> <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: {}, //路口 output: { }, //输出出口 module: { loaders: [ ] }, babel: { //配置babel &quot;presets&quot;: [&quot;es2015&quot;], &quot;plugins&quot;: [&quot;transform-runtime&quot;] }, plugins: [ ],//编译的时候所执行的插件数组 vue: { },//vue的配置,需要单独出来配置 devtool : &quot;source-map&quot; //调试模式 }; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><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-attr">en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a></span>: {}, <span class="hljs-comment">//路口</span> output: { }, <span class="hljs-comment">//输出出口</span> <span class="hljs-built_in">module</span>: { <span class="hljs-attr">loaders</span>: [ ] }, <span class="hljs-attr"><a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a></span>: { <span class="hljs-comment">//配置babel</span> <span class="hljs-string">"p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>s"</span>: [<span class="hljs-string">"es2015"</span>], <span class="hljs-string">"<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a>s"</span>: [<span class="hljs-string">"trans<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>-runtime"</span>] }, <span class="hljs-attr">plugins</span>: [ ],<span class="hljs-comment">//编译的时候所执行的插件<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a></span> vue: { },<span class="hljs-comment">//vue的配置,需要单独出来配置</span> devtool : <span class="hljs-string">"source-map"</span> <span class="hljs-comment">//调试模式</span> }; </code></pre> <p>这很简单就不过多介绍,由于我们是多页应用,我们需要编写一个函数获取所有路口js,生成一个我们想要的路径的对象.</p> <h2 id="articleHeader3">三、en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a></h2> <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=" //需要用到glob模块 var glob = require('glob'); var getEntry = function () { var entry = {}; //首先我们先读取我们的开发目录 glob.sync('./source/**/*.js').forEach(function (name) { var n = name.slice(name.lastIndexOf('source/') + 7, name.length - 3); n = n.slice(0, n.lastIndexOf('/')); //接着我对路径字符串进行了一些裁剪成想要的路径 entry[n] = name; }); console.log(entry); /** * entry = { * 'crowd/index' : './source/crowd/index/index.js', * 'index/index' : './source/index/index/index.js' * } * **/ //最后返回entry 给 webpack的entry return entry; };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-comment">//需要用到glob模块</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> glob = <span class="hljs-built_in">require</span>(<span class="hljs-string">'glob'</span>); <span class="hljs-keyword">var</span> getEntry = <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> entry = {}; <span class="hljs-comment">//首先我们先读取我们的开发目录</span> glob.sync(<span class="hljs-string">'./source/**/*.js'</span>).<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>Each(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>) </span>{ <span class="hljs-keyword">var</span> n = name.<a href="http://www.js-code.com/tag/slice" title="浏览关于“slice”的文章" target="_blank" class="tag_link">slice</a>(name.lastIndexOf(<span class="hljs-string">'source/'</span>) + <span class="hljs-number">7</span>, name.<a href="http://www.js-code.com/tag/length" title="浏览关于“length”的文章" target="_blank" class="tag_link">length</a> - <span class="hljs-number">3</span>); n = n.slice(<span class="hljs-number">0</span>, n.lastIndexOf(<span class="hljs-string">'/'</span>)); <span class="hljs-comment">//接着我对路径字符串进行了一些裁剪成想要的路径</span> entry[n] = name; }); <span class="hljs-built_in">console</span>.log(entry); <span class="hljs-comment">/** * entry = { * 'crowd/index' : './source/crowd/index/index.js', * 'index/index' : './source/index/index/index.js' * } * **/</span> <span class="hljs-comment">//最后返回entry 给 webpack的entry</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> entry; };</code></pre> <h2 id="articleHeader4">四、output</h2> <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=" output: { //输出位置 path: path.resolve(__dirname, './public/'), //配置输出路径 filename: './js/[name].js' //文件输出形式 //关于filename 我们有个变量就是 [name] = entry的key 当然还有别的变量比如[id],[hash]等,大家可以自行发挥 //我们也能把filename写成 filename : [name]/[name].[name].js 也是可以的 }, " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> output: { <span class="hljs-comment">//输出位置</span> path: path.resolve(__dirname, <span class="hljs-string">'./<a href="http://www.js-code.com/tag/public" title="浏览关于“public”的文章" target="_blank" class="tag_link">public</a>/'</span>), <span class="hljs-comment">//配置输出路径</span> filename: <span class="hljs-string">'./js/[name].js'</span> <span class="hljs-comment">//文件输出形式</span> <span class="hljs-comment">//关于filename 我们有个变量就是 [name] = entry的key 当然还有别的变量比如[id],[hash]等,大家可以自行发挥</span> <span class="hljs-comment">//我们也能把filename写成 filename : [name]/[name].[name].js 也是可以的</span> }, </code></pre> <h2 id="articleHeader5">五、loader</h2> <p>关于loader,其实有两种写法</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=" { test: /.(png|jpg|gif)$/, loader: 'url?limit=10000&amp;name=./images/[name].[ext]?[hash:10]', /*query: { limit: 10000, name: './images/[name].[ext]?[hash:8]' }*/ }, //在这无论是直接loader 后面跟参数(像url跟参一样),或者是后面跟着一个对象 query,都是可以的. " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.(png|jpg|g<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>)$/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">'url?limit=10000&amp;name=./images/[name].[ext]?[hash:10]'</span>, <span class="hljs-comment">/*query: { limit: 10000, name: './images/[name].[ext]?[hash:8]' }*/</span> }, <span class="hljs-comment">//在这无论是直接loader 后面跟参数(像url跟参一样),或者是后面跟着一个对象 query,都是可以的.</span> </code></pre> <h2 id="articleHeader6">六、 <a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>s</h2> <blockquote> <ul> <li> <p>这里我就只用到一个就是生成 独立的css文件,style嵌套在页面里的方式实在是丑得不行</p> </li> </ul> </blockquote> <h2 id="articleHeader7">七、 vue</h2> <p>这没啥好说的,vue更新之后需要单独出来配置了</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="vue: { //vue的配置,需要单独出来配置 loaders: { js: 'babel' } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">vue: { <span class="hljs-comment">//vue的配置,需要单独出来配置</span> loaders: { <span class="hljs-attr">js</span>: <span class="hljs-string">'babel'</span> } }</code></pre> <h2 id="articleHeader8">八、 NODE_ENV</h2> <blockquote> <ul> <li> <p>以上都是我们的开发配置,在生产环境中,我们还需要添加一些东西</p> </li> <li> <p>关于调试 在这里我也处理了非常久,如果开发的时候直接把vue的配置都写好,那在 页面是有问题的.所以我们得另外写一套vue,专门在生产环境中使用</p> </li> </ul> </blockquote> <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=" //由于我们的.vue文件模块化开发,里面自然也有 css与sass,我们也需要配置最后导出css文件 var vueLoader = { js: 'babel', css: ExtractTextPlugin.extract(&quot;vue-style-loader&quot;, &quot;css-loader&quot;), sass: ExtractTextPlugin.extract(&quot;vue-style-loader&quot;, &quot;css-loader&quot;, 'sass-loader') }; if (process.env.NODE_ENV === 'production') { //判断是否为生产环境 module.exports.vue.loaders = vueLoader; //以下直接借鉴尤大大的了 module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '&quot;production&quot;' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin() ]); } else { //不是生产环境则配置devtool 调试 module.exports.devtool = 'source-map'; } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-comment">//由于我们的.vue文件模块化开发,里面自然也有 css与sass,我们也需要配置最后导出css文件</span> <span class="hljs-keyword">var</span> vueLoader = { <span class="hljs-attr">js</span>: <span class="hljs-string">'babel'</span>, <span class="hljs-attr">css</span>: ExtractTextPlugin.extract(<span class="hljs-string">"vue-style-loader"</span>, <span class="hljs-string">"css-loader"</span>), <span class="hljs-attr">sass</span>: ExtractTextPlugin.extract(<span class="hljs-string">"vue-style-loader"</span>, <span class="hljs-string">"css-loader"</span>, <span class="hljs-string">'sass-loader'</span>) }; <span class="hljs-keyword">if</span> (process.env.NODE_ENV === <span class="hljs-string">'production'</span>) { <span class="hljs-comment">//判断是否为生产环境</span> <span class="hljs-built_in">module</span>.exports.vue.loaders = vueLoader; <span class="hljs-comment">//以下直接借鉴尤大大的了</span> <span class="hljs-built_in">module</span>.exports.plugins = (<span class="hljs-built_in">module</span>.exports.plugins || []).concat([ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> webpack.DefinePlugin({ <span class="hljs-string">'process.env'</span>: { <span class="hljs-attr">NODE_ENV</span>: <span class="hljs-string">'"production"'</span> } }), <span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({ <span class="hljs-attr">compress</span>: { <span class="hljs-attr">warnings</span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span> } }), <span class="hljs-keyword">new</span> webpack.optimize.OccurenceOrderPlugin() ]); } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { <span class="hljs-comment">//不是生产环境则配置devtool 调试</span> <span class="hljs-built_in">module</span>.exports.devtool = <span class="hljs-string">'source-map'</span>; } </code></pre> <h2 id="articleHeader9">九、 gulp</h2> <blockquote> <ul> <li> <p>仅仅只有webpack部分还是没法满足我们的初衷,所以我们需要gulp进行辅助</p> </li> </ul> </blockquote> <p>webpack仅仅只会把我们js路口里的所有东西都处理了,但是我们的页面都是我们自己手动写的(还没想到更好的解决方案)</p> <p>所以我们需要借助gulp的力量,把我们的.html移入我们想要的目录</p> <p>但是这样的目录结构输出其实是有问题的</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=" --- source (前端开发目录) |--- index (一个业务需求模块,每个业务需求模块下会有很多页面) | |--- index (index 页面) | | |--- images | | |--- index.html | | |--- app.vue | | |--- index.js | | |--- style.scss | | |--- ... | |--- topics (topics 页面) | | |--- images | | |--- topics.html | | | ... |--- crowd (另外一个业务需求模块,每个业务需求模块下会有很多页面) | |--- index | | |--- index.html //我们可以知道gulp通过通配符 ./source/**/*.html 匹配到的文件 输入输出目录结构都是相同的 //那我们就会得到以下错误的输出结构 --- Application (错误结构) |--- Home | |--- View (线上用户访问的.html目录) | |--- index (一个业务需求模块) | | |--- index (index 页面,多余的目录) | | | |--- index.html | | |--- topics (topics页面,多余的目录) | | | |--- topics.html | |--- crowd (crowd业务模块) | | |--- index (crowd业务模块 index页面,多余的目录) | | | |--- index.html //我们的业务模块文件应该包含所有的业务页面,而无需一个页面就是一个文件夹. //所以以下才是正确的目录结构 --- Application (正确结构) |--- Home | |--- View (线上用户访问的.html目录) | | |--- index (一个业务需求模块) | | | |--- index.html | | | |--- topics.html | | |--- crowd (另一个业务需求模块) | | | |--- index.html " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> --- source (前端开发目录) |--- index (一个业务需求模块,每个业务需求模块下会有很多页面) | |--- index (index 页面) | | |--- images | | |--- index.html | | |--- app.vue | | |--- index.js | | |--- style.scss | | |--- ... | |--- topics (topics 页面) | | |--- images | | |--- topics.html | | | ... |--- crowd (另外一个业务需求模块,每个业务需求模块下会有很多页面) | |--- index | | |--- index.html <span class="hljs-comment">//我们可以知道gulp通过通配符 ./source/**/*.html 匹配到的文件 输入输出目录结构都是相同的</span> <span class="hljs-comment">//那我们就会得到以下错误的输出结构</span> --- Application (错误结构) |--- Home | |--- View (线上用户访问的.html目录) | |--- index (一个业务需求模块) | | |--- index (index 页面,多余的目录) | | | |--- index.html | | |--- topics (topics页面,多余的目录) | | | |--- topics.html | |--- crowd (crowd业务模块) | | |--- index (crowd业务模块 index页面,多余的目录) | | | |--- index.html <span class="hljs-comment">//我们的业务模块文件应该包含所有的业务页面,而无需一个页面就是一个文件夹.</span> <span class="hljs-comment">//所以以下才是正确的目录结构</span> --- Application (正确结构) |--- Home | |--- View (线上用户访问的.html目录) | | |--- index (一个业务需求模块) | | | |--- index.html | | | |--- topics.html | | |--- crowd (另一个业务需求模块) | | | |--- index.html </code></pre> <blockquote> <ul> <li> <p>本人想了非常多种方式都没办法实现,最后找到了唯一的办法(非常的愚蠢的办法,如果您有更好的办法麻烦告诉我 T.T)</p> </li> </ul> </blockquote> <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="var map = require('map-stream'); var vfs = require('vinyl-fs'); gulp.task('view', function () { var log = function(file, cb) { //定义输出路径 var view = __dirname + '/Application/Home/View'; //又是一段切割过程 获取我们想要的结构 var target = file.path.split('/').splice(-3); var qqqq = target.splice(1, 1); //设置我们的文件输出path file.path = view + '/' + target.join('/'); cb(null, file); }; vfs.src('./source/**/*.html') .pipe(rev()) //这里您可以做一些pipe的操作 .pipe(map(log)) .pipe(vfs.dest('./output')); //这里会多输出一次 gulp.start(['clean']); //我们需要执行一次clean 清理了多余的那层目录 }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">var</span> map = <span class="hljs-built_in">require</span>(<span class="hljs-string">'map-stream'</span>); <span class="hljs-keyword">var</span> vfs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'vinyl-fs'</span>); gulp.task(<span class="hljs-string">'view'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> log = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">file, cb</span>) </span>{ <span class="hljs-comment">//定义输出路径</span> <span class="hljs-keyword">var</span> view = __dirname + <span class="hljs-string">'/Application/Home/View'</span>; <span class="hljs-comment">//又是一段切割过程 获取我们想要的结构</span> <span class="hljs-keyword">var</span> target = file.path.split(<span class="hljs-string">'/'</span>).splice(<span class="hljs-number">-3</span>); <span class="hljs-keyword">var</span> qqqq = target.splice(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>); <span class="hljs-comment">//设置我们的文件输出path</span> file.path = view + <span class="hljs-string">'/'</span> + target.join(<span class="hljs-string">'/'</span>); cb(<span class="hljs-literal"><a href="http://www.js-code.com/tag/null" title="浏览关于“null”的文章" target="_blank" class="tag_link">null</a></span>, file); }; vfs.src(<span class="hljs-string">'./source/**/*.html'</span>) .pipe(rev()) <span class="hljs-comment">//这里您可以做一些pipe的操作</span> .pipe(map(log)) .pipe(vfs.dest(<span class="hljs-string">'./output'</span>)); <span class="hljs-comment">//这里会多输出一次</span> gulp.start([<span class="hljs-string">'clean'</span>]); <span class="hljs-comment">//我们需要执行一次clean 清理了多余的那层目录</span> }); </code></pre> <blockquote> <ul> <li> <p>这样我们就能获得我们想要的目录! 并且还能经过pipe对html文件的操作! 最大的难点也就在这里</p> </li> </ul> </blockquote> <p>以上基本是我们所有的配置了,关于热加载,或者是browserSync等别的辅助开发工具,大家可以在这基础上自行拓展.</p> <h2 id="articleHeader10">十、后话</h2> <p>年终,前端各种战争大家也都看见了.在这样一个前端需求极速增长,百家争鸣,百花齐放的黄金时代.大家应该持续保持学习的热情</p> <p>关注时代发展,观望技术发展,不盲目跟风,选择最适合自己的,最符合现有项目的.</p> <p>倘若一个工具没法为你们的项目带来更好的效率,给开发带来更有益的发展.那你最好保持观望,别盲从.</p> <p>本人没有经历过grunt时代,但是自从学习前端自动化构建以来也是一路从 grunt -&gt; gulp -&gt; webpack 过渡的</p> <p>在这期间完全可以了解他们之前的差异和不同,更多的应该学习思想</p> <p>你应该多质问自己,为什么这个工具当下会火呢?你应该不应该学习?</p> <p>我十分不赞同那些拿来即用的同学,说什么不久之后就死了,学也没什么用,浪费时间,我抄一个不就好了吗?</p> <p>虽然我写得都很基础,但我还是希望您别看我的文章.</p> <blockquote> <ul> <li> <p>如果能给您带来不错的学习体验,麻烦请右上角star : ) <code> hava a nice day </code></p> </li> </ul> </blockquote> <p>原文地址: <a href="http://www.meckodo.com/?p=525" rel="nofollow noreferrer" target="_blank">http://www.meckodo.com/?p=525</a></p> <p>全部代码:<a href="https://github.com/MeCKodo/webpack" rel="nofollow noreferrer" target="_blank">https://github.com/MeCKodo/webpack</a></p> <p></code></p>

总结

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

WebPack在多页应用项目中的探索

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

WebPack在多页应用项目中的探索

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

80%的人都看过