webpack入門

Vixb 發布于2019-08-26 18:28 / 1690人閱讀

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

1 創建項目文件夾 : webpack_test
2 創建文件 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 執行 webpack src/js/entry.js dist/js/bundle.js 命令，表示將此js文件打包到dist/js/bundle.js文件下，這個文件夾系統會新建出來
webpack 打包json 數據
新建 test.json文件，里面寫入數據，執行命令與打包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/")

}
}

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

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

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

}

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

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

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

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

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

Ashin 2019-08-20 14:34 評論0 收藏0
webpack入門學習手記（一）

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

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

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

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

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

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

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

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

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

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