webpack 基本操作

webpack 使用步驟

1.1. webpack 第一階段

1.1.1. 命名初始化階段

專案名不能有漢字,不能取名叫 webpack

建立專案名稱並生成 package.json, 命令 : npm init -y

安裝 : npm i -D webpack webpack-cli

webpack : 是 webpack 工具的核心包

webpack-cli : 提供了一些在終端中使用的命令

-D(--save-dev) : 表示專案開發期間的依賴,也就是 : 線上程式碼中用不到這些包了

建立一個main.js檔案

console.log('我就要被打包了,哦也');

在 package.json的scripts中,新增指令碼

"scripts": { "build": "webpack main.js" },

// webpack 是webpack-cli 中提供的命令, 用來實現打包的

// ./main.js 入口檔案,要打包哪個檔案

執行 : npm run build

設定開發狀態 : mode

"build" : "webpack ./main.js --mode development"

// WARNING in configuration

// The 'mode' option has not been set, webpack will fallback to 'production' for this value.

// 如果沒有設定 mode 配置項, webpack 會預設提供開發環境(production)

// Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

// 專案開發的兩種環境

開發環境 (development) : 開發過程就是開發環境
生產環境 (production) : 線上環境, 也就是 : 專案做好了,釋出上線

生產環境下, 打包生產的js檔案都是壓縮後的, 開發環境下程式碼一般是不壓縮的

1.1.2. 隔行變色案例建立 src/index.html

隔行案例 => html => ul#list>li{我是 li $}*10

安裝 juqery : npm i jquery, 並且引入 jquery

暫時引入 main.js , 在 main.js 裡寫入

// 使用ES6的模組化語法

import $ from 'jquery' // 優點不用沿著路徑去找

$('#list > li:odd').css('backgroundColor', 'red')

$('#list > li:even').css('backgroundColor', 'green')

// 語法報錯

問題 :

// 引入 main.js 會報錯,因為瀏覽器不支援這個import 的Es6語法

// npm run build 之後

// 引入 dist/main.js 後會ok,因為webpack

幫我們轉化為瀏覽器能夠識別的es5語法了

歷程 :

//1. 如果index.html 中引入 jquery , 再引入 mian.js (沒有引入jquery了) => ok

//2. 如果index.html 中沒有引入 jquery , 直接使用es6的模組化語法 import ,

引入main.js就會報錯

//3. 如果index.html 中沒有引入 jquery , 直接使用es6的模組化語法 import ,

webapck打包出 dist/main.js 引入 dist/main.js ==> ok

為什麼 dist檔案下的main.js 檔案裡的程式碼突然這麼多

1.2. webpack 第二階段

1.2.1. webpack 配置檔案

準備工作 : src原始檔 : index.html和main.js

webpack 打包有兩種方式

1-命令列 2-配置項

方式 1 : 命令列

"build" : "webpack ./mian.js" --mode development
```
npm run build
複製程式碼
```
一般情況下 : 改為

"build" : 入口  --output 出口
複製程式碼

"build": "webpack ./src/js/main.js --output ./dist/bundle.js  --mode development",
複製程式碼

驗證 : index.html 引入 bundle.js
複製程式碼

方式 2 : 配置項

第一步 : 專案根目錄下, 建立一個 webpack.config.js檔案 (檔名固定死)

     專門指定其他檔案 : --config  webpack.XX.js
複製程式碼

第二步 : 在 webpack.config.js 中,進行配置

// webpack 是基於 node的 , 所以配置檔案符合 node 方式書寫配置

// 注意 : 不要再這個檔案中使用ES6的的模組化 import語法

// main.js裡可以使用,是因為要通過webpack轉化為es5的

// 而這個是webpack 的配置檔案,,它是要轉化別人的,所以必須要通過

第三步 : 修改 package.json 中的 scripts , 指令碼命令為： "build": "webpack"

第四步 : 執行命令 : npm run build

示例程式碼(webpack.config.js) :

const path = require('path')

module.exports = {

// 入口

entry: path.join(__dirname, './src/js/main.js'),

// 出口

output: {

// 出口目錄

path: path.join(__dirname, './dist'),
filename: 'bundle.js'
複製程式碼

},

// 開發模式

mode: 'development' }

1.2.2. webpack 配置檔案 html-webpack-plugin

html-webpack-plugin 必備的外掛

作用 :

能夠根據指定的模板檔案 (index.html),自動生成一個新的 index.html, 並且注入到dist資料夾下
能夠自動引入js檔案

安裝 : npm i html-webpack-plugin

配置 :

第一步: 引入模組

const htmlWebpackPlugin = require('html-webpack-plugin')

第二步: 配置

// 外掛

plugins: [

// 使用外掛指定模板

new htmlWebpackPlugin({

template: path.join(__dirname, './src/index.html')
複製程式碼

}) ]

1.2.3. webpack 配置檔案 : webpack-dev-server

webpack-dev-server 使用 webpack 必備的功能(外掛)

作用 : 為使用 webpack 打包提供一個伺服器環境

1.1 自動為我們的專案建立一個伺服器

1.2 自動開啟瀏覽器

1.3 自動監視檔案變化,自動重新整理瀏覽器...

使用步驟 :

2.1 安裝 : npm i -D webpack-dev-server

2.2 兩種使用方式: 1-命令列 2-配置檔案(推薦)

方式 1 : 命令列配置

指令碼 : "dev" : "webpack-dev-server"

執行到 npm run dev

檢視路徑 : "http://localhost:8080/"

｢wds｣: Project is running at http://localhost:8080/

問題 1 : 自動開啟? 解決 : 新增 --open

問題 2 : 指定埠號解決 : 新增 --port 3001

問題 3 : 熱更新解決 : --hot ( 整個頁面和整個專案打包 )

方式 2 : 配置檔案配置

// hot 不要寫在配置檔案裡面,,不然的話還要配其他外掛麻煩

"dev" : "webpack-dev-server --hot",

devServer : {

open : true,
port : 3001
複製程式碼

}

1.3. webpack 第三階段打包上線

開發模式 : npm run dev ==> 不會打包的 ,只會把專案放到伺服器裡

假設專案開發完成了,要上線,怎麼操作?

2.1 執行 : npm run build 對專案進行打包,生成dist檔案

2.2 模擬本地伺服器 : 安裝 : npm i -g http-server

2.3 把dist檔案裡的內容放到伺服器裡即可, 直接執行http-server

驗證打包上線,另外新建一個資料夾,將dist中的檔案放入新檔案終端輸入http-server

控制檯會出現類似以下

http://127.0.0.1:8080

http://192.168.74.29:8080

http://10.254.8.100:8080

瀏覽器中輸入其中之一

1.4. webpack 第四階段 : 打包非js檔案

webpack 只能處理 js 檔案,非 js(css.less.圖片.字型等)處理處理不了, 藉助 loader 載入器

1.4.1. 處理 css 檔案

建立一個 css 檔案, 然後在 main.js中引入 import '../css/index.css';

ul { style-list : none }

安裝 : npm i -D style-loader css-loader

在 webpack.config.js 中,新增個新的配置項 module

在 module 中新增 loader 來處理 css

// loader

module: {

rules: [

//1.處理 css
  // 注意點 use執行loader 順序 從右往左
  // css-loader  :  讀取css檔案內容,將其轉化為一個模組
  // style-loader :拿到模組, 建立一個style標籤,插入頁面中
  
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
複製程式碼

] }

1.4.2. 處理 less 檔案

建立一個 less 檔案, 然後再 main.js 中引入 import '../css/index.less';

安裝 : npm i -D less-loader less style-loader css-loader

在 webpack.config.js 中, 配置 module->rules

在 module 中, 新增 loader 來處理 less

ul {

background-color: aqua;

li {

&:hover {
  color: yellow;
}
 }
複製程式碼

}

配置 :

{ test :/.less$/, use : ['style-loader','css-loader','less-loader'] },

1.4.3. 處理圖片檔案設定背景圖片 .cls {

width: 300px;

height: 300px;

background: url('../css/4.jpg');

background-size: 100%;

}

安裝 : npm i -D url-loader file-loader

url-loader (推薦) 和 file-loader 二選一即可

在 webpack.config.js 新增 loader 規則

// 處理圖片

{ test : /.(jpg|png)$/, use : ['url-loader'] },

url-loader 預設會將圖片轉化為 base64 編碼格式, 目的:提高效能

file-loader 在車裡圖片時, 會對檔案進行重新命名 :

原始： background-image: url(../images/1.jpg);

處理後： background-image: url(9c9690b56876ea9b4d092c0baef31bb3.jpg);

base64 編碼格式的圖片說明 :

精靈圖 : 將一些小圖片合併為一張圖片,減少請求次數,提高效能

字型圖示 :直接將一些小的圖片,合併到字型檔案中,並且不會失真

base64 : 是一種編碼格式,能夠將圖片、文字等常見的檔案, 轉化為 base64 格式,這種字串格式, 瀏覽器能夠識別並且讀取顯示到頁面中;

base64 是一個字串,也可以直接被內嵌到頁面中, 或者 css 中

注意 : 大圖片不適合用 base64 處理, 只有小的圖示才適合 base64 處理

設定配置

方式1 :{ test : /.(jpg|png)$/, use : ['url-loader?limit=57417'] },

方式2 : { test: /.(jpg|png)$/, use: [ { loader: 'url-loader', options: {

          //  比57417這個小 => 轉化為base64
          //  大於等於這個57417值 => 不會轉base64 內部呼叫 file-loader 載入圖片
          
          limit: 57417
        }
      }
    ]
  },
複製程式碼

1.4.4. 處理字型檔案準備字型圖示: 字型圖示檔案 iconfont 或者從阿里向量圖示裡下載

拷貝到專案中的 css 資料夾中

在 main.js 中引入 css 檔案

import '../css/iconfont/iconfont.css' 使用 :

在 webpack.config.js 中配置

處理字型圖示

{ test:/.(svg|woff|woff2|ttf|eot)$/,use:'url-loader'}

1.4.5. 處理 ES6 語法

現在的專案都是使用 ES6 開發的, 但是這些新的 ES6 語法,

並不是所有的瀏覽器都支援, 所以就需要有一個工具,幫我們轉成 es5 語法, 這個就是:

babel babel Babel is a JavaScript compiler. ==> babel 是一個 JavaScript 編譯器

webpack 只能處理 import / export 這個 es6 模組化語法而其他的 js

新語法,應該使用 babel 來處理

比如 : var o = { ...obj } 在谷歌上可以,edge 就不可以

babel 的使用 :

6.1 安裝 1 : npm i -D babel-core babel-loader@7

babel-core 是 babel 的核心包

babel-loader 載入 js 檔案, 並將 js 程式碼內容交給 babel-core 解析為 es5

低版本的 js

6.2 安裝 2 : npm i -D babel-preset-env babel-preset-stage-2

babel-preset-* 表示能夠解析什麼版本的 js 語法

babel-preset-env : 表示能夠解析 es2015,es2016,es2017,es2018 這些標準的語法

babel-preset-stage-2 : 用來解析經過會遇到,但是還沒有被採納為標準的語法

比如 : 'abc'.padStart(10, '6') : 準備 10 位字元,有 abc,前面不夠用 6 補充,是 es2017 的語法,

babel-polyfill與babel-plugin-transform-runtime

也是做相容處理的,以前都是用這個,相容更早的

6.3 配置 : 在 webpack.config.js 中新增一個 loader

{ test: /.js$/, use: 'babel-loader', exclude: /node_modules/ }

6.4 在專案根目錄中建立 babel 的配置檔案，叫：.babelrc

{ "presets": [ "env", "stage-2" ],

// 暫時不用

// 如果未來某一天真的用到了polify

"plugins": [
    ["transform-runtime", {
            "helpers": false,
            "polyfill": true,
            "regenerator": true,
            "moduleName": "babel-runtime"
}]
複製程式碼

6.5 測試 : 谷歌和 edge var obj = { name: 'zs', age: 20 }

var o = { ...obj } console.log(o) 1.4.6. webpack中文連結 : www.webpackjs.com/loaders/url…

webpack 基本操作

相關文章