webpack入門

Vixb 發(fā)布于2019-08-26 18:28 / 1689人閱讀

摘要：創(chuàng)建項目文件夾創(chuàng)建文件安裝只能打包或文件，要打包其他類型的文件，需要用到打包工具打包文件項目下新建文件，文件名自己定義執(zhí)行命令，表示將此文件打包到文件下，這個文件夾系統(tǒng)會新建出來打包數(shù)據(jù)新建文件，里面寫入數(shù)據(jù)，執(zhí)行命令與打包相似配置

1 創(chuàng)建項目文件夾 : webpack_test
2 創(chuàng)建文件 package.json
3 安裝webpack
npm install webpack -g npm install webpack --save-dev

webpack 只能打包js 或 json 文件，要打包其他類型的文件，需要用到打包工具loader
webpack 打包js文件
1 項目下新建src/js/entry.js文件，文件名自己定義
2 執(zhí)行 webpack src/js/entry.js dist/js/bundle.js 命令，表示將此js文件打包到dist/js/bundle.js文件下，這個文件夾系統(tǒng)會新建出來
webpack 打包json 數(shù)據(jù)
新建 test.json文件，里面寫入數(shù)據(jù)，執(zhí)行命令與打包js相似

webpack.config.js配置
新建webpack.config.js文件，配置該文件
const path=require("path");
module.exports = {
entry: "./src/js/entry.js",
output:{

    filename:"bundle.js",
    path: path.resolve(_dirname,"dist/js/")

}
}

當(dāng)配置好這個文件后，直接執(zhí)行webpack命令，就能將所有需要打包的文件打包到dist/js/bundle.js里

接上面添加如下代碼：熱加載配置
devServer:{

contentBase: "dist/"  //webpack-dev-server默認(rèn)服務(wù)于根路徑下的index，添加這句表示服務(wù)于dist目錄下的

}

使用插件
常用插件 : html-webpack-plugin 根據(jù)模板html生成引入script的頁面 clean-webpack-plugin 清除dist文件夾

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110245.html

相關(guān)文章

webpack -> vue Component 從入門到放棄（一）

摘要：本身也是運行在環(huán)境中的模塊，它通常會返回一個函數(shù)。這個命名規(guī)則和搜索優(yōu)先級順序在的中定義。那就等下一篇介紹吧，一篇文章有太多內(nèi)容，會讓人很乏的從入門到放棄四從入門到放棄二從入門到放棄三源代碼此篇文章僅僅是整理自己接觸webpack的入門過程，可能有很多不正確的地方，希望大家諒解，并指出錯誤幫助改進(jìn)。對于webpack的介紹和前期對他的入門使用，我覺得官方（中文網(wǎng)）已經(jīng)介紹的很簡單了...

Ashin 2019-08-20 14:34 評論0 收藏0
webpack入門學(xué)習(xí)手記（一）

摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續(xù)相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四本人微信公眾號：前端修煉之路，歡迎關(guān)注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學(xué)習(xí)過webpack。這兩天剛好有時間，學(xué)習(xí)了下...

mengera88 2019-08-23 14:01 評論0 收藏0
webpack -> vue Component 從入門到放棄（三）

摘要：離上一篇已經(jīng)一個星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來抒發(fā)抒發(fā)情感。插件的使用一般是在的配置信息選項中指定。本身內(nèi)置了一些常用的插件，還可以通過安裝第三方插件。從入門到放棄四從入門到放棄二從入門到放棄一源代碼離上一篇已經(jīng)一個星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來抒發(fā)抒發(fā)情感。上一篇簡單介紹了webpack的配置，這里稍微再做一一下延伸插件插件可以完成更多 ...

array_huang 2019-08-20 14:48 評論0 收藏0
webpack 實踐筆記（一）--- 入門

摘要：實踐筆記入門一官網(wǎng)文檔地址實踐工程地址本篇文章可切換到分支查看源代碼。簡單分步實踐創(chuàng)建一個空文件夾，進(jìn)入全局安裝創(chuàng)建文件創(chuàng)建執(zhí)行命令這個時候項目中多了一個文件，使用標(biāo)簽將其引入到中在瀏覽器中打開文件，頁面出現(xiàn)文字。 webpack 實踐筆記入門（一） [webpack官網(wǎng)文檔地址]:（http://webpack.github.io/docs...） [實踐工程地址]: (https:...

bergwhite 2019-08-20 11:03 評論0 收藏0
webpack -> vue Component 從入門到放棄（二）

摘要：我們可以根據(jù)模塊類型擴(kuò)展名來自動綁定需要的。當(dāng)需要加載的文件匹配的正則時，就會調(diào)用后面的對文件進(jìn)行處理，這正是強(qiáng)大的原因。這篇就這樣吧，感覺進(jìn)度有點慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應(yīng)該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點升華。 First Step 我們給第一篇例子中加個...

DobbyKim 2019-08-20 14:37 評論0 收藏0
webpack -> vue Component 從入門到放棄（二）

摘要：我們可以根據(jù)模塊類型擴(kuò)展名來自動綁定需要的。當(dāng)需要加載的文件匹配的正則時，就會調(diào)用后面的對文件進(jìn)行處理，這正是強(qiáng)大的原因。這篇就這樣吧，感覺進(jìn)度有點慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應(yīng)該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點升華。 First Step 我們給第一篇例子中加個...

xiaochao 2019-08-01 16:23 評論0 收藏0