乙個簡單webpack配置例項詳解

2021-09-23 06:04:30 字數 990 閱讀 3928

在沒有入門webpack之前,你可能覺得一大堆的配置讓人眼花繚亂,無法理解。但當你理解之後,其實每乙個配置背後都是非常合理的。

現在你想要對你的專案進行打包,那麼在配置中你就必須說明這三個問題:從**開始?如何打包?、到**去?

那麼與之對應的就是三個配置項:entry、module、output

entry與output顧名思義就是webpack從**開始對你的專案進行打包,打包完生成的檔案放到**去。

接下來就剩下乙個最重要的問題:如何打包?,那就是module。

乙份簡要的配置如下:

const path =

require

('path');

const htmlwebpackplugin =

require

('html-webpack-plugin'

)const webpack =

require

("webpack"

)module.exports =

,//檔案入口位址,說明從**開始打包

entry:

,//檔案出口位址,說明生成檔案的路徑以及檔名

output:

, module:,}

,//babel編譯需要配置babel在.babelrc檔案

//說明以.html結尾的檔案使用html-loader處理,除去node_modules中的檔案},

//處理html檔案]}

, plugins:

[//說明html模版所在的位置,然後將處理好的js新增到html中,

newhtmlwebpackplugin()

],optimization:

,//將webpack執行時的**分離出來

runtimechunk:

true,}

}

webpack 簡單配置

const extracttextplugin require extract text webpack plugin 打包的css拆分,將一部分抽離出來 const webpack require webpack 引入的webpack,使用lodash const htmlwebpackplugi...

乙個簡單的爬蟲例項

獲取網頁html文字內容 usr bin python coding utf 8 import urllib import re 根據url獲取網頁html內容 defgethtmlcontent url page urllib.urlopen url return page.read 從html中...

乙個簡單的Ant例項

在eclipse裡面做web專案確實是一件比較煩人的事,所有的事都得自己做。但卻不失為乙個學習,提高自己知識的好機會。像myeclipse,只要發布一下,web應用就可以訪問了,但是eclipse裡面,需要自己手動編譯,手動打包發布到伺服器才能訪問。下面就是乙個簡單用ant發布web應用的例子,別小...