webpack多頁(yè)應(yīng)用

Pocher 發(fā)布于2019-08-02 16:01 / 2318人閱讀

本文主要講了webpack怎么搭建多頁(yè)應(yīng)用，熟悉下webpack的基本用法。

新建文件夾，目錄結(jié)構(gòu)如下：

然后

cd webpack-test

npm init（根目錄下創(chuàng)建了一個(gè)pakage.json）

npm install webpack@1.15.0 --save-dev（安裝webpack，我這里用的是1版本）

根目錄下新建webpack.config.js開(kāi)始配置，參照這里

js部分的處理：

演示：在src > page > index下新建index.js隨便輸入一行代碼，比如console.log("index"),修改webpack.config.js

在命令行輸入webpack，可以看到根目錄下多了個(gè)dist文件夾，src/page/index/index.js被打包到了dist/index.js里面，下面我們修改哈配置文件，讓他可以打包多入口的情況

這樣我們已經(jīng)可以分別打包了，但是如果index > index.js 和 login > index.js同時(shí)引用了一個(gè)公共js，我們也希望可以把公共的東西提取出來(lái)多帶帶打包，這就要用到webpack的插件CommonsChunkPlugin，參考這里，注意：webpack4中已經(jīng)沒(méi)有這個(gè)插件

現(xiàn)在讓index > index.js 和 login > index.js 同時(shí) require("./../common.js")，修改配置文件:
config里面添加代碼:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "common", // 對(duì)應(yīng)入口處的common，會(huì)整體打包入common
        filename: "js/base.js"
        // chunks: ["common"]
    })
  ]

這里用了new webpack.optimize.CommonsChunkPlugin，所以需要在前面var webpack = require("webpack")

index > index.js：

require("./../common.js")
console.log("index")

require("./../common.js")
console.log("login")

再次打包，可以看到common.js被多帶帶打包到了base.js

html部分的處理：html-webpack-plugin

上面已經(jīng)可以打包js了，如果現(xiàn)在我們要測(cè)試打包的內(nèi)容，需要在page > view 下新建index.html,引入dist/js下面的js,我們想把html也打包到dist,按需引入自己的js,參考這里

這里要用到插件，需要安裝：npm i --save-dev html-webpack-plugin
參見(jiàn)文檔修改配置：

new HtmlWebpackPlugin({
   // 打包后的目標(biāo)文件
   filename: "view/index.html",
   // 要打包的目標(biāo)文件
   template: "src/view/index.html",
   inject: true,
   hash: true,
   // 表示當(dāng)前html引入公共js和與當(dāng)前對(duì)應(yīng)的js
   // 需要引入哪些js
   chunks: ["common", "index"]
})

執(zhí)行webpack,可以看到打包成功，點(diǎn)開(kāi)dist/view/index.html：

說(shuō)明打包成功，base.js和index.js都正確引入
面對(duì)多頁(yè)應(yīng)用，我們還經(jīng)常面臨多個(gè)頁(yè)面頭部和底部相同的情況，每個(gè)頁(yè)面去寫(xiě)未免有點(diǎn)麻煩，我們可以用html-loader解決這個(gè)問(wèn)題
安裝:npm install html-loader --save-dev

view下新建layout文件夾,再分別新建header.html和footer.html
heder.html:

footer.html:

我是footer

然后在index.html里面修改：




    <%= require("html-loader!./layout/head.html")  %>


index
<%= require("html-loader!./layout/footer.html")  %>

再次打包，可看到：

到此，公共html也生效了，還剩下樣式的處理和多帶帶打包，下次繼續(xù)
第一次寫(xiě)，有些凌亂

云服務(wù)器 GPU云服務(wù)器多頁(yè)應(yīng)用構(gòu)建多頁(yè)應(yīng)用多頁(yè) 更新多頁(yè)多行數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/54515.html

相關(guān)文章

webpack多頁(yè)應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？

摘要：在上一篇文章多頁(yè)應(yīng)用架構(gòu)系列二配置常用部分有哪些中，我介紹了如何配置多頁(yè)應(yīng)用的入口，然而，如果僅僅如此操作，帶來(lái)的后果就是，打包生成出來(lái)的每一個(gè)入口文件都會(huì)完整包含所有代碼。的初始化常用參數(shù)有哪些，給這個(gè)包含公共代碼的命個(gè)名唯一標(biāo)識(shí)。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190...

oliverhuang 2019-08-22 10:37 評(píng)論0 收藏0
webpack多頁(yè)應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)

摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里這系列文章講什么本系列文章主要介紹如何用這一當(dāng)前流行的構(gòu)建工具來(lái)設(shè)計(jì)一個(gè)多頁(yè)應(yīng)用的架構(gòu)。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000006843916如果您對(duì)本系列文章...

Lowky 2019-08-20 10:50 評(píng)論0 收藏0
webpack多頁(yè)應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼

摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。如果你使用了，或類(lèi)似的，那么，通過(guò)編譯前后的代碼相差就很大了，這會(huì)造成兩個(gè)問(wèn)題以為例把你的代碼轉(zhuǎn)成什么樣你自己是無(wú)法控制的，這往往導(dǎo)致無(wú)法通過(guò)的審查。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000007030775如果您...

dingding199389 2019-08-20 11:20 評(píng)論0 收藏0
webpack多頁(yè)應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯

摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里前言書(shū)承上文多頁(yè)應(yīng)用架構(gòu)系列十如何打造一個(gè)自定義的。終于，發(fā)現(xiàn)了這一大殺器，打包時(shí)間過(guò)長(zhǎng)的問(wèn)題得到完美解決。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000710437...

sixleaves 2019-08-20 11:33 評(píng)論0 收藏0
webpack多頁(yè)應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁(yè)&頁(yè)面模板

摘要：徹底分離源文件目錄和生成文件目錄使用生成出來(lái)的頁(yè)面可以很安心地跟打包好的其它資源放到一起，相對(duì)于另起一個(gè)目錄專(zhuān)門(mén)存放頁(yè)面文件來(lái)說(shuō)，整個(gè)文件目錄結(jié)構(gòu)更加合理如何利用生成頁(yè)面生成頁(yè)面主要是通過(guò)來(lái)實(shí)現(xiàn)的，下面來(lái)介紹如何實(shí)現(xiàn)。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000712...

BaronZhang 2019-08-20 11:34 評(píng)論0 收藏0
webpack多頁(yè)應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡(jiǎn)單的模板布局系統(tǒng)

摘要：原文地址如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里前言上文多頁(yè)應(yīng)用架構(gòu)系列十二利用生成普通網(wǎng)頁(yè)頁(yè)面模板我們基本上已經(jīng)搞清楚如何利用來(lái)生成普通網(wǎng)頁(yè)頁(yè)面模板，本文將以我的腳手架項(xiàng)目介紹如何在這基礎(chǔ)上搭建一套簡(jiǎn)單的模板布局系統(tǒng)。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 評(píng)論0 收藏0