webpack2.0入門學習_byKL

時間 2019-11-07

標籤 webpack2.0 webpack 入門學習 bykl 简体版

原文原文鏈接

webpack入門

首先什麼是webpack？css

webpack是一個集前端自動化、模塊化、組件化於一體的可拓展系統，你能夠根據本身的須要來進行一系列的配置和安裝，最終實現你須要的功能並進行打包輸出。html
在 Webpack 當中, 全部的資源都被看成是模塊, js, css, 圖片等等..所以, Webpack 當中 js 能夠引用 css, css 中能夠嵌入圖片 dataUrl對應各類不一樣文件類型的資源, Webpack 有對應的模塊 loader,好比 CoffeeScript 用的是 coffee-loader, 其餘還有不少:http://webpack.github.io/docs/list-of-loaders.html前端
代碼分離:Webpack有兩種依賴聲明方式：同步與異步。異步方式，將依賴分割成多個節點，而後每一個節點造成一個新的文件塊。通過優化後的文件塊樹，會以一個個文件形式分發出去（僅僅打包成一個大文件形式是很低效的，詳見）。node
加載器插件:原生的Webpack只能處理JS文件，使用加載器插件，能夠將其餘資源專爲JS資源。經過這種方式來加載，每一種資源均可以被Webpack看做是一個模塊來加載。webpack
智能模塊解析:Webpack內置一個智能加載模塊，能夠用於處理幾乎全部的第三方庫。它甚至能夠解析依賴聲明的表達式，好比 require("./templates" + name + ".jade")。Webpack會處理最多見的JS模塊標準：CommonJS 和 AMD。git
插件系統:Webpack的最大特色，就是配套了很是豐富的插件系統。大部份內置特性功能都是基於這套插件系統。它可讓你根據須要自定義Webpack，將通常插件做爲開源項目發佈出去。github

安裝webpack

# 新建demo文件夾並打開
mkdir demo && cd demo 

#初始化npm，生成package.json配置文件
npm init  


#結果
➜  npm init         
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

#這些配置項根據須要填寫,不過也能夠直接修改package.json文件
Press ^C at any time to quit.
name: (demo) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to .....package.json:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) 

#查看當前目錄,生成了一個package.json,webpack就是使用這個文件進行模塊,依賴查找安裝的
➜ls
package.json

npm install --save webpack // 安裝webpack

#安裝結果
ck
└─┬ webpack@2.2.1 
  └─┬ node-libs-browser@2.0.0
    └─┬ crypto-browserify@3.11.0
      └─┬ browserify-sign@4.0.0
        └─┬ elliptic@6.3.3 
          └── brorand@1.0.7 
          
          
#安裝後會多了一個目錄,就是npm的模塊的目錄
node_modules package.json

須要注意的是,這個webpack安裝的是在目錄裏面的,並非在全局目錄,因此可能會出現沒法調用webpac命令: command not found: webpack
1.要麼安裝全局webpack: npm i -g webpack
2.使用局部目錄的webpack: ./node_modules/.bin/webpack,能夠將他添加到.bash_profile裏面,主要目錄須要絕對路徑web

關於webpack的基本效果

在不依賴任何自動化、模塊化工具的項目中，一般咱們的代碼是這樣的：shell

<html>
  <head>
    <title>傳統項目</title>
  </head>
  <body>
    <script src="js/index.js"></script>
  </body>
</html>

function main() {
    alert("hello");
}

main();

這樣管理JavaScript項目有一些問題：npm

若是依賴項丟失，或者包含在錯誤的順序中，應用程序將不會運行。
若是包含依賴項但沒有使用，那麼瀏覽器必須下載不少沒必要要的代碼。
當咱們js文件愈來愈多(一個模塊一個js文件),http請求也會變得不少,須要合併js
多js模塊的全局做用域的污染問題

因此爲了解決以上問題，咱們須要使用webpack來實現一些改變。

打包

webpack.config.js

webpack.config.js位於當前項目文件夾根位置,這個文件須要本身建立
這個文件其實就是webpack處理參數的合集,經過一個文件進行管理

module.exports = {  //這是commonJS的導出語法
    entry: './app/index.js', //entry就是咱們的入口文件，能夠有多個入口文件,是webpack打包的輸入對象
    output: { //output即爲webpack打包的輸出對象
        filename: 'bundle.js',//filename爲輸出文件名
        path: './dist' //path爲輸出路徑
    },
}

CommonJS中的exports.xxx=xxx或者module.exports=xxx，以及AMD中的return xxx都叫導出，導出後外部模塊引用時就可使用被導出的部分。沒導出的部分將做爲模塊私有部分，外部沒法訪問

To achieve this CommonJS gives you two tools:

the require() function, which allows to import a given module > into the current scope.

the module object, which allows you to export something from > the current scope.

module.exports會告訴webpack使用commonJS來處理導出模塊

進行打包命令:webpack app/index.js dist/bundle.js

Hash: 3c42ca5bcbeae36c37dd
Version: webpack 2.2.1
Time: 76ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.79 kB       0  [emitted]  main
   [0] ./app/index.js 64 bytes {0} [built]
   [1] ./dist/bundle.js 0 bytes {0} [built]
   [2] multi ./app/index.js ./app/index.js ./dist/bundle.js 52 bytes {0} [built]

成功進行了打包,打包以後就會生成了一個./dist/bundle.js合併的js文件,因此html引用js的須要修改成打包後的合併的js文件,這樣就能夠實現網頁使用打包的js文件了,打包以前能夠多個js文件進行開發,開發後進行合併,實現模塊化

<html>
<head>
    <title>傳統項目</title>
</head>
<body>
<!--<script src="app/index.js"></script>-->
<script src="dist/bundle.js"></script>
</body>
</html>

引用參考: