webpack 基本用法

2021-08-30 13:21:02 字數 1122 閱讀 6429

咳咳  進入正題!

建立兩個資料夾

src源**(即js,css,html這些)       

dist生產環境容器(即**過審,過測試,準備上傳至伺服器或什麼地方時,就放這裡頭)

總結一下   src放開發**   dist放開發之後的成品。

然後在dist資料夾建立index.html檔案

建立乙個

記得預設//該檔案是用webpack打包時自動生成的  所以需要提前引入

然後在src資料夾下建立乙個入口檔案(此處命名為entery.js)

寫入   document.getelementbyid("title").innerhtml="hello maomao";

2.進行第一次打包

現在就可以開始打包檔案了

打包命令為:  webpack src/index.js  dist/index.html    (檔名自定義即可)

然後  鏘鏘鏘!

報錯了,

the 'mode' option has not been set, webpack will fallback to 'production' for this value. set 'mode' option to 'development' or 'production' to enable defaults for each environment.

以上的警告指的是沒有設定是開發模式還是生產模式,要求指定.

只需要在專案中的package.json中script中配置上

"dev": "webpack --mode development",    "build": "webpack --mode production" 兩句即可

然後從dist訪問即可檢視打包後的結果   執行index.html   

頁面上就會有hello maomao列印了

webpack4 0基本用法

總結了一下webpack4.0基本用法,基本上所有配置都有注釋說明,超級詳細啊!dist是打包目錄 js壓縮外掛程式 const htmlplugin require html webpack plugin 實現html打包功能,引用好路徑的到html來 const glob require glo...

webpack高階用法

webpack與grunt gulp的不同?與webpack類似的工具還有哪些?談談你為什麼最終選擇 或放棄 使用webpack?有哪些常見的loader?他們是解決什麼問題的?有哪些常見的plugin?他們是解決什麼問題的?loader和plugin的不同?webpack的構建流程是什麼?從讀取配...

webpack基本使用

npm install webpack webpack cli webpack dev server d 複製 當在專案中直接執行webpack時,預設讀取webpack.config.js中的配置,等同於執行 webpack webpack.config.js const path require...