【webpack】入門Demo

技術小阿哥發表於2017-11-27
Web

概述

Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔，等到實際需要的時候再非同步載入。通過 loader 的轉換，任何形式的資源都可以視作模組，比如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。

webpack在開發中可以使用 JavaScript 處理你的依賴關係和載入順序，避免意外引入一些你不需要在生產中用上的 CSS 樣式表和 JS 庫，使專案膨脹，或重複載入某些js,css等庫。

使用webpack

初始化專案

mkdir webpack-demo && cd webpack-demo 

npm init -y 

建立並進入webpack-demo，初始化一個新的專案，並建立package.json檔案，’-y’表示可接受package.json的一對預設值（多個npm使用技巧）

建立目錄結構：

├── src 

│ ├── main.js 

│ ├── assets 

│ │ ├── css 

│ │ └── img 

├── README.md 

├── index.html 

├── package.json 

├── webpack.config.js 

└── yarn.lock

安裝

npm i webpack -D

webpack.config.js

配置資訊

  1. 入口（entry）：告訴webpack打包從哪裡開始
  2. 輸出（output）：如何處理打包程式碼及打包輸出到什麼位置
  3. 載入器（loaders）：通過loader識別出各種資源，將這些檔案轉換為模組
  4. 外掛（plugins）：由於載入器僅基於單個檔案執行轉換，外掛可以做一些更復雜的操作及自定義功能

簡單配置

module.exports = {
    entry: `./src/main.js`,
    output: {
        filename: `./dist/bundle.js`
    }
}

執行

webpack 

dist目錄下生成bundle.js檔案

webpack其他引數

  • webpack -p – 進行優化壓縮處理，相當於設定process.env.NODE_ENV=”production”
  • webpack –watch – 持續監聽構建
  • webpack -d – debug模式，包含source maps
  • webpack –display-error-details – 顯示詳細的打包出錯資訊
  • webpack -h 檢視更多的資訊，常見的還有–colors，–progress
  • webpack –config XXX.js //使用另一份配置檔案（比如webpack.config2.js）來打包

    載入更多資源 –使用loader

栗子：

{
test: /.js$/, 
loader: `babel-loader`, 
include: path.resolve(__dirname, `src`),
exclude: /node_modules/,

}

loader是比較核心的一塊內容，它將各類靜態資源通過loader轉換為js模組，一個loader包含以下幾部分

test： 一個匹配loaders所處理的檔案的擴充名的正規表示式（必須） 

loader： loader的名稱（必須） 

include/exclude: 新增必須處理的檔案（資料夾）或遮蔽不需要處理的檔案（資料夾）（可選） 

query： 為loaders提供額外的設定選項（可選）

1.ES6語法的js babel-loader

babel-loader安裝相應的包

npm i babel-loader -D

安裝babel-core和babel-preset-es2015，將ES6的程式碼轉換成ES5

npm i babel-core babel-preset-es2015 -D

在module.rules中新增loader節點

module: {

rules: [{

test: /.js$/, 

loader: `babel-loader`, 

query: {presets: [`es2015`]}

}]

}

  1. 樣式 css-loader，style-loader

src/assets/css下新建style.css

body { 

background-color: #ff0; 

}

main.js中引入css資源,會報錯，因為沒有相應的loader進行處理

require(‘./assets/css/style.css’)

新增loader處理

npm i css-loader style-loader -D

{ 

test: /.css$/, 

loader: ‘style-loader!css-loader’ 

}

在編譯的js程式碼中我們可以看到

/ 4 /

/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(1)(undefined);

// imports

// module

exports.push([module.i, “body {
background-color: #ff0;
}
“, “”]);

// exports

/***/ }),

  1. 圖片 file-loader url-loader

url-loader是對file-loader的封裝

npm i file-loader url-loader -D

{test: /.(png|jpg)$/, loader: “url-loader?limit=8192”}

這樣會將小於8kb的圖片直接以base64的格式內嵌到程式碼中，在一定程度上減少小圖片的請求 

main.js中新增程式碼

let img1 = document.createElement(`img`)

img1.src = require(`./assets/img/icon.png`)

document.body.appendChild(img1)

更多的loaders：http://webpack.github.io/docs/list-of-loaders.html

啟一個服務webpack-dev-server

dist下新建index.html

<!DOCTYPE html>

<html>

<head>

<title>webpack demo page</title>

</head>

<body>

<script src=”/dist/bundle.js”></script>

</body>

</html>

安裝相應的包

npm i webpack-dev-server -D

model下新增配置

devServer: {

contentBase: path.join(__dirname, `dist`),

compress: false,

inline: true,

port: 8080

}

執行

node_modules/.bin/webpack-dev-server 

開啟 http://127.0.0.1:8080/ 頁面變為×××

我們可以將這個指令碼放在package.json中

“scripts”: {

“start”: “node_modules/.bin/webpack”,

“serve”: “node_modules/.bin/webpack-dev-server”

}

這樣我們可以直接執行

npm run serve

加入程式守護nodemon

“scripts”: {

“start”: “nodemon –exec webpack -w webpack.config.js”,

“serve:watch”: “nodemon –exec webpack-dev-server -w webpack.config.js”

}

頁面實時重新整理 Hot Module Replacement(HMR) 熱載入

It’s like LiveReload for every module. 

當模組發生變化時，記憶體中的bundle會收到通知，如果不影響到整個頁面的變化，只會重新整理區域性，而不用重新整理整個頁面。

設定hot為true

devServer: {

contentBase: path.join(__dirname, “),

compress: true,

inline: true,

hot: true, **

port: 8080

},

2.新增到pligins中

plugins: [

new webpack.HotModuleReplacementPlugin() //熱載入外掛

],

chrome控制檯開啟我們可以看到，說明HMR已經開啟

[HMR] Waiting for update signal from WDS…

[WDS] Hot Module Replacement enabled.

附：webpack修改每次都重啟？nodemon守護

nodemon程式守護，用來監控你node.js原始碼的任何變化，自動重啟服務

npm i nodemon -g 

nodemon – -exec webpack -w webpack.config.js

這裡我們只需要監聽webpack.config.js檔案的變化，所以新增-w引數指定特定的目錄或者檔案

進階

目錄結構

├── src

│ ├── main.js –主入口

│ ├── assets

│ │ ├── css

│ │ └── img

│ ├── libs

│ │ └── util.js –公共方法

│ ├── modules

│ │ ├── login.js –登入頁面

│ │ └── product.js –商品頁面

├── README.md

├── index.html

├── package.json

├── webpack.config.js

└── yarn.lock

  1. 多頁應用

entry的配置我們可以是string，object，array型別，前面的例子用到的是string，單個入口，現在我們新增了幾個目錄及檔案

entry: {

main: `./src/main.js`,

login: `./src/modules/login.js`,

product: `./src/modules/product.js`

}

上面的入口檔案都在src目錄下，那麼可以設定一個基礎目錄，絕對路徑，用於從配置中解析入口起點(entry point)和載入器(loader)

context 

The base directory (absolute path!) for resolving the entry option. If output.pathinfo is set, the included pathinfo is shortened to this directory. 

入口檔案的基礎目錄（絕對路徑！）。如果output.pathinfo設定，值為到該目錄的路徑。 

更多webpack基礎配置

context: path.resolve(__dirname, `src`),

entry: {

main: `./main.js`,

login: `./modules/login.js`,

product: `./modules/product.js`

}

如果是陣列，那麼會將陣列中的模組合併，並且輸出最後一個；如果是object，那麼多個入口的key會打包成包的chunk名稱。

output: {

path: path.join(__dirname, `dist`),

publicPath: `/`,

filename: `[name]-[hash:8].js`,

chunkFilename: `[id]-[chunkhash].js`

}

跑webpack會看到dist下生成login-5ccbce5e.js，main-5ccbce5e.js，product-5ccbce5e.js三個檔案

  1. 省略副檔名？resolve.extensions

可以直接寫util，而不用util.js， vue檔案也可以省略檔名

resolve: {

extensions: [“, `.js`, `.vue`] 

}

  1. 檔案查詢的路徑太長？resolve.alias縮減引用路徑

    resolve: {

    extensions: [`.js`, `.css`] ,

    alias: {

    `libs`: path.resolve(__dirname, `src/libs`)，

    `react`: `node_modules/react/react.js`

    }

    這樣在src下的任何js檔案都可以直接這樣引入模組，而不用../libs/util

import { ajax } from ‘libs/util’

自動引入vue/jquery ？ProvidePlugin

自動載入模組，ProvidePlugin可以讓我們無需引入的情況下，以全域性的模式直接使用模組變數

new webpack.ProvidePlugin({ 

Vue: ‘Vue’ 

})

程式碼中可以不用引入vue直接使用vue

原地址:http://blog.csdn.net/Doris_rain/article/details/77942604


相關文章