webpack基本使用

時間 2019-12-05

標籤 webpack 基本使用简体版

原文原文鏈接

我的接觸前端並非好久，對於webpack倒是久仰大名，也難怪，做爲一款優秀的模塊加載器兼打包工具，webpack近來風頭可謂一時無二，本身也想着學習並但願可以瞭解其工做方式和理念，拋開跟風不談，至少學習新的技術對本身是大有裨益的。javascript

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

安裝html

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

基本使用前端

//靜態頁面：index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>webpack</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" ></script>
    </body>
</html>

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

編譯 entry.js 並打包到 bundle.js,於命令行輸入java

webpack entry.js bundle.js

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

配置webpack

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來加載，能夠閱讀相應的文檔來了解不一樣加載器所提供的功能。web

執行npm