成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack基本使用

wh469012917 / 2702人閱讀

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

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

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

安裝

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

基本使用

//靜態(tài)頁面：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={
    //頁面入口設(shè)置
    entry:"./entry.js",
    //入口文件輸出配置
    output:{
        path:__dirname,
        filename:"bundle.js"
    },
    module:{
        //加載器配置
        loaders:[
          //加載器可以使用簡稱例如style,其具體規(guī)則可見webpack的resolveLoader.moduleTemplates api
          //.css 文件使用style-loader和css-loader加載器來處理
          { test: /.css$/, loader: "style-loader!css-loader" },
           //圖片文件使用url-loader加載器來處理，小于8kb的話則轉(zhuǎn)換成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來加載，可以閱讀相應(yīng)的文檔來了解不同加載器所提供的功能。

執(zhí)行

webpack --watch

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

npm install webpack-dev-server -g

使用webpack-dev-server構(gòu)建本地服務(wù)器，在瀏覽器輸入localhost：8080會以監(jiān)聽模式自動運行webpack

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84290.html

相關(guān)文章

  • Webpack基本功能理解以及使用

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

    KnewOne 評論0 收藏0

  • webpack 項目構(gòu)建：（一）基本架構(gòu)搭建

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

    voidking 評論0 收藏0

  • 文章3：webpack（3）

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

    RyanQ 評論0 收藏0

  • 前端webpack workflow（二）——Webpack基本使用

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

    roadtogeek 評論0 收藏0

  • 前端webpack workflow（二）——Webpack基本使用

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

    LeexMuller 評論0 收藏0

發(fā)表評論

0條評論

wh469012917

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<