webpak最全的簡單入門

時間  2019-11-16
標籤 webpak 簡單 入門 简体版
原文   原文鏈接

瞭解webpack

什麼是webpack

官方文檔是這樣介紹的：點我瞭解官方文檔javascript

簡單的來講，WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。css

Webpack是由Tobias Koppers開發的一個開源前端模塊構建工具。它的基本功能是將以模塊格式書寫的多個JavaScript文件打包成一個文件，同時支持CommonJS和AMD格式。但讓它不同凡響的是，它提供了強大的loader API來定義對不一樣文件格式的預處理邏輯，從而讓咱們能夠將CSS、模板，甚至是自定義的文件格式當作JavaScript模塊來使用。Webpack 基於loader還能夠實現大量高級功能，好比自動分塊打包並按需加載、對圖片資源引用的自動定位、根據圖片大小決定是否用base64內聯、開發時的模塊熱替換等等，能夠說是目前前端構建領域最有競爭力的解決方案之一。html

webpack和Grunt,Gulp的區別

<!-- more -->前端

Webpack與Gulp、Grunt沒有什麼可比性，它能夠看做模塊打包機，經過分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。Gulp/Grunt是一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優勢使得Webpack在不少場景下能夠替代Gulp/Grunt類的工具。java

<u>他們的工做方式也有較大區別：</u>node

Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務。webpack

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。git

安裝

npm安裝

Webpack可使用npm安裝，新建一個空的文件夾（名字隨意），在終端中轉到該文件夾後執行下述指令就能夠完成安裝。github

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack

cnpm安裝

npm在國內安裝會比較慢，因此可使用淘寶 NPM 鏡像定製的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm，首先要安裝cnpmweb

npm install -g cnpm --registry=https://registry.npm.taobao.org
//查看cnpm是否安裝成功
cnpm -v
//若是出現版本號的信息，說明你安裝成功

而後你就能夠重複上面的npm安裝

//全局安裝
cnpm install -g webpack
//安裝到你的項目目錄
cnpm install --save-dev webpack

此時你會發現速度飛快。

建立package.json文件

你能夠手動在你的項目根目錄裏面建立一個package.json文件，這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init（cnpm init）命令能夠自動建立這個package.json文件

cnpm init

輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，不過不用擔憂，若是你不許備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認便可（以下圖）。

package.json文件已經就緒，咱們在本項目中安裝Webpack做爲依賴包

// 安裝Webpack
cnpm install --save-dev webpack

回到根目錄空文件夾，並在裏面建立兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數據和咱們將寫的JavaScript模塊，public文件夾用來存放以後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。

接下來咱們再建立三個文件:

  • index.html --放在public文件夾中;
  • Greeter.js-- 放在app文件夾中;
  • main.js-- 放在app文件夾中;

咱們在index.html文件中寫入最基礎的html代碼（html模板頁面上一篇文章中我有提到），它在這裏目的在於引入打包後的js文件（這裏咱們先把以後打包後的js文件命名爲bundle.js）。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>webpack入門</title>
    <!-- 設置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容國產瀏覽器的高速模式 -->
    <meta name="renderer" content="webkit">
    <meta name="Author" content="孟繁勝遊" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
      
    </style>
</head>
<body>
    <div id="root">

    </div>
<script type="text/javascript" src="bundle.js"></script>
<script type="text/javascript">
  
</script>
</body>
</html>

咱們在Greeter.js中定義一個返回包含問候信息的html元素的函數,並依據CommonJS規範導出這個函數爲一個模塊：

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "new webpack";
  return greet;
};

main.js文件中咱們寫入下述代碼，用以把Greeter模塊返回的節點插入頁面。

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

至此，萬事俱備，只欠東風

運行webpack

經過終端運行

webpack能夠在終端中使用，在基本的使用方法以下：

# {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑，
# {destination for bundled file}處填寫打包文件的存放路徑
# 填寫路徑的時候不用添加{}
webpack {entry file} {destination for bundled file}

指定入口文件後，webpack將自動識別項目所依賴的其它文件，不過須要注意的是若是你的webpack不是全局安裝的，那麼當你在終端中使用此命令時，須要額外指定其在node_modules中的地址，繼續上面的例子，在終端中輸入以下命令

# webpack非全局安裝的狀況
node_modules/.bin/webpack app/main.js public/bundle.js

運行事後能夠看到下面的運行結果

圖片描述

能夠看出webpack同時編譯了main.js 和Greeter,js,如今打開index.html,能夠看到以下結果

圖片描述

經過配置文件來使用Webpack

Webpack擁有不少其它的比較高級的功能（好比說本文後面會介紹的loaders和plugins），這些功能其實均可以經過命令行模式實現，可是正如前面提到的，這樣不太方便且容易出錯的，更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，咱們能夠把全部的與打包相關的信息放在裏面。

繼續上面的例子來講明如何寫這個配置文件，在當前練習文件夾的根目錄下新建一個名爲webpack.config.js的文件，咱們在其中寫入以下所示的簡單配置代碼，目前的配置主要涉及到的內容是入口文件路徑和打包後文件的存放路徑。

const path=require('path');
module.exports={
  //JavaScript執行入口文件,
  entry:'./app/main.js',
  //須要指定一下輸出的路徑path和輸出的文件名filename
  output:{
    path:path.resolve(__dirname,'./public'),  //自定義輸出文件所在目錄
    filename: "bundle.js"//打包後輸出文件的文件名
  },
  //設置mode
   mode: 'development' // 設置mode
}

有了這個配置以後，再打包文件，只需在終端裏運行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就能夠了，這條命令會自動引用webpack.config.js文件中的配置選項，示例以下：

圖片描述

第二種方法成功運行，接下來看一個更方便的方法。

設置配置文件 打開

在命令行中輸入命令須要代碼相似於node_modules/.bin/webpack這樣的路徑實際上是比較煩人的，不過值得慶幸的是npm能夠引導任務執行，對npm進行配置後能夠在命令行中使用簡單的npm start命令來替代上面略微繁瑣的命令。在package.json中對scripts對象進行相關設置便可，設置方法以下。

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.1"
  }
}

npm的start命令是一個特殊的腳本名稱，其特殊性表如今，在命令行中使用npm start就能夠執行其對於的命令，若是對應的此腳本名稱不是start，想要在命令行中運行時，須要這樣用npm run {script name}如npm run build，咱們在命令行中輸入npm start試試，輸出結果以下：

圖片描述

若是出現讓你安裝webpack-cli的提示，那你就輸入yes，安裝webpack-cli依賴

圖片描述

總結（概括流程）

首先建立空文件夾經過命令全局安裝webpack

//全局安裝
npm install -g webpack
//或者--淘寶鏡像，速度比較快
cnpm install -g webpack

其次初始化你的文件根目錄而且安裝依賴

npm init  //根目錄初始化
npm install --save-dev webpack // 安裝Webpack

而後建立你的項目

eg：在根文件夾下建立一個src文件夾，src文件夾裏面能夠放入你的源代碼js，css等
    一樣根目錄下建立一個public文件夾，裏面放入你的html文件它在這裏目的在於引入打包後的js文件，這裏咱們先把       以後打包後的js文件命名爲bundle.js

根目錄下建立並配置webpack.config.js文件

const path=require('path');
module.exports={
  //JavaScript執行入口文件,
  entry:'./src/js/main.js',
  //須要指定一下輸出的路徑path和輸出的文件名filename
  output:{
    filename:'bundle.js',   //自定義輸出文件名
    path:path.resolve(__dirname,'./public/js')  //自定義輸出文件所在目錄
  },
  //設置mode
   mode: 'development' // 設置mode
}

而後在根目錄下運行webpack

webpack

圖片描述

輸出成功後，打開你的html文件，便可看到完整的項目！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程