webpack多頁應用

Pocher 發布于2019-08-02 16:01 / 2257人閱讀

本文主要講了webpack怎么搭建多頁應用，熟悉下webpack的基本用法。

新建文件夾，目錄結構如下：

然后

cd webpack-test

npm init（根目錄下創建了一個pakage.json）

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

根目錄下新建webpack.config.js開始配置，參照這里

js部分的處理：

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

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

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

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

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "common", // 對應入口處的common，會整體打包入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

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

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

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

執行webpack,可以看到打包成功，點開dist/view/index.html：

說明打包成功，base.js和index.js都正確引入
面對多頁應用，我們還經常面臨多個頁面頭部和底部相同的情況，每個頁面去寫未免有點麻煩，我們可以用html-loader解決這個問題
安裝: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也生效了，還剩下樣式的處理和多帶帶打包，下次繼續
第一次寫，有些凌亂

GPU云服務器云服務器多頁應用構建多頁應用多頁更新多頁多行數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54515.html

webpack多頁應用架構系列（三）：怎么打包公共代碼才能避免重復？

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

oliverhuang 2019-08-22 10:37 評論0 收藏0
webpack多頁應用架構系列（一）：一步一步解決架構痛點

摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里這系列文章講什么本系列文章主要介紹如何用這一當前流行的構建工具來設計一個多頁應用的架構。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000006843916如果您對本系列文章...

Lowky 2019-08-20 10:50 評論0 收藏0
webpack多頁應用架構系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼

摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。如果你使用了，或類似的，那么，通過編譯前后的代碼相差就很大了，這會造成兩個問題以為例把你的代碼轉成什么樣你自己是無法控制的，這往往導致無法通過的審查。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000007030775如果您...

dingding199389 2019-08-20 11:20 評論0 收藏0
webpack多頁應用架構系列（十一）：預打包Dll，實現webpack音速編譯

摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里前言書承上文多頁應用架構系列十如何打造一個自定義的。終于，發現了這一大殺器，打包時間過長的問題得到完美解決。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/119000000710437...

sixleaves 2019-08-20 11:33 評論0 收藏0
webpack多頁應用架構系列（十二）：利用webpack生成HTML普通網頁&頁面模板

摘要：徹底分離源文件目錄和生成文件目錄使用生成出來的頁面可以很安心地跟打包好的其它資源放到一起，相對于另起一個目錄專門存放頁面文件來說，整個文件目錄結構更加合理如何利用生成頁面生成頁面主要是通過來實現的，下面來介紹如何實現。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/119000000712...

BaronZhang 2019-08-20 11:34 評論0 收藏0
webpack多頁應用架構系列（十三）：構建一個簡單的模板布局系統

摘要：原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里前言上文多頁應用架構系列十二利用生成普通網頁頁面模板我們基本上已經搞清楚如何利用來生成普通網頁頁面模板，本文將以我的腳手架項目介紹如何在這基礎上搭建一套簡單的模板布局系統。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 評論0 收藏0