webpack基本使用

wh469012917 發布于2019-08-20 18:17 / 2692人閱讀

摘要：個人接觸前端并不是很久，對于卻是久仰大名，也難怪，作為一款優秀的模塊加載器兼打包工具，近來風頭可謂一時無二，自己也想著學習并希望能夠了解其工作方式和理念，拋開跟風不談，至少學習新的技術對自己是大有裨益的。

個人接觸前端并不是很久，對于webpack卻是久仰大名，也難怪，作為一款優秀的模塊加載器兼打包工具，webpack近來風頭可謂一時無二，自己也想著學習并希望能夠了解其工作方式和理念，拋開跟風不談，至少學習新的技術對自己是大有裨益的。

引用一張webpack官網的圖片，作為一款模塊打包器，webpack負責分析模塊間的依賴關系，隨即將模塊按照不同的加載器規則生成相對應的資源。我們需要模塊化工具為我們做的，包括初始加載量少，按需加載，自定義打包邏輯等功能功能，webpack都能夠滿足，它的loader加載器可以將各種類型的資源轉換成我們所需要的模塊，其豐富的插件系統也讓我們自定義需求。

安裝

//node 環境自不必多說
//全局安裝webpack
npm install -g webpack
//進入項目目錄
//生成package.json
npm init
//安裝webpack依賴
npm install webpack --save-dev

基本使用

//靜態頁面：index.html


    
        
        webpack

//JS文件入口：entry.js
document.write("Hello world. ")

編譯 entry.js 并打包到 bundle.js,于命令行輸入

webpack entry.js bundle.js

隨即你會看到命令行會顯示日志，提示你打包成功，打開瀏覽器運行index.html，你會看到Hello world.

配置

var webpack=require("webpack");
module.exports={
    //頁面入口設置
    entry:"./entry.js",
    //入口文件輸出配置
    output:{
        path:__dirname,
        filename:"bundle.js"
    },
    module:{
        //加載器配置
        loaders:[
          //加載器可以使用簡稱例如style,其具體規則可見webpack的resolveLoader.moduleTemplates api
          //.css 文件使用style-loader和css-loader加載器來處理
          { test: /.css$/, loader: "style-loader!css-loader" },
           //圖片文件使用url-loader加載器來處理，小于8kb的話則轉換成base64
          { test: /.(png|jpg)$/, loader: "url-loader?limit=8192"}
        ]
    },
    //插件項配置
    plugins:[
         //為bundle.js頭部添加注釋信息     
        new webpack.BannerPlugin("this file is created by cala")
    ]
}

webpack.config.js配置基本上存在于每一個使用webpack項目中，作為一個配置項，告訴webpack它的具體功能，包括加載器作用與插件項的功能，所有的加載器都是通過npm來加載，可以閱讀相應的文檔來了解不同加載器所提供的功能。

執行

webpack --watch

啟動監聽模式，如此便可以避免在每次修改模塊后都重新編譯，開啟監聽模式后，沒有變化的模塊會在編譯后緩存到內存中，而不會每次都被重新編譯

npm install webpack-dev-server -g

使用webpack-dev-server構建本地服務器，在瀏覽器輸入localhost：8080會以監聽模式自動運行webpack

關于webpack還有很多令人驚奇的地方，看官方文檔可以知道很多關于webpack的工作原理或者是其相關的周邊生態，道阻且長，也希望自己能夠不斷的學習新的技術，未來能夠用于項目中，更深的體會其原理跟奧妙。

GPU云服務器云服務器 webpack使用 webpack 使用公用cdn python基本使用 linux基本使用

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

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

Webpack基本功能理解以及使用

摘要：在這個過程中，會用到一些解析工具用來預處理一些模塊以及拓展語言例如這些工具的配置使用都是在中完成的。屬性，表示進行轉換時，應該使用哪個。插件接口功能極其強大，可以用來處理各種各樣的任務。對于前端工程化，webpack一個神奇的工具，既然是個神奇的工具。那我們保留我們的好奇心，來聊一聊它，首先我們要搞清楚webpack到底是用來解決什么問題的，然后我們來看看它到底是怎么做的，最后來看看...

KnewOne 2019-08-26 10:09 評論0 收藏0
webpack 項目構建：（一）基本架構搭建

摘要：在下一個章節，我們會配合搭建一個可以用最新語法開發的平臺項目構建二編譯環境搭建。注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。一、準備工作安裝最新的 Node.js 環境；（官網地址：https://nodejs.org/zh-cn/）安裝 cnpm 淘寶npm鏡像；（在控制臺執行命令：npm install -g cnpm --r...

voidking 2019-08-22 15:03 評論0 收藏0
文章3：webpack（3）

摘要：中的會自動的替換中的，也即最后生成的文件叫做。基礎路徑后面介紹。都需要依賴模塊，我也裝啦。我將完整的復制一份，當我在打開的時候，它又讓我重新在裝，以及，后來我全局安裝。備注：說明（第一次寫的文章還沒有寫好就提交啦，這里我接著上篇文章繼續寫））上編文章說道安裝webpack的順序不能改變下面繼續：一：webpack的目錄結構附上本人webpackdemo01的代碼下面介...

RyanQ 2019-08-26 12:25 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數，方便部署文件處理。以上僅僅介紹了前端開發最基本的用法，更多參數以及功能使用，參考官網作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

roadtogeek 2019-08-21 10:47 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數，方便部署文件處理。以上僅僅介紹了前端開發最基本的用法，更多參數以及功能使用，參考官網作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

LeexMuller 2019-08-28 18:22 評論0 收藏0