Webpack： 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。
爲了簡化開發的複雜度，前端社區涌現出了很多好的實踐方法：模塊化，讓我們可以把複雜的程序細化爲小的文件;
類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之後還能轉換爲JavaScript文件使瀏覽器可以識別；Scss，less等CSS預處理器
因此，Webpack就是可以分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用.
webpack概念
webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。
打包工具
- JavaScript 模塊打包之後就可以運行在瀏覽器
能做什麼
- webpack 可以當作是一個模塊打包平臺，但是它本身只能打包 JavaScript 模塊
- 對於其它的文件模塊資源，則需要使用第三方 loader 來處理
- JavaScript 資源打包
- css 打包
- 圖片 打包
- less
- sass
- babel EcmaScript 6 轉 EcmaScript 5
- 開發工具：http 服務器
- 代碼改變，自動刷新瀏覽器
- 壓縮代碼
- JavaScript 代碼壓縮
- html 代碼壓縮
- css 代碼壓縮
核心概念
- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibility
其它打包工具
相關資源鏈接
- webpack 官網
- webpack 1.x
- webpack 2 之後
- 最新版本是 4.x
- 官方教程
- Github 倉庫
- 常用 Loaders 列表
- 常用 Plugins 列表
配置webpack第三方包
通常情況下我們不打包第三方包，因爲第三方包太大，和 bundle 打包到一起會造成資源體積過大，所以我們還是通過 script 標籤的方式把第三方資源引入到頁面中，只需要通過以下配置即可，這裏以 jQuery 爲例
- 下載第三方包
npm i jquery
- 在頁面中引入資源
<script src="node_modules/jquery/dist/jquery.js"></script>
- 配置
externals: {
// key 是第三方包名稱，value 是全局中的 jQuery 對象
// 這裏配置的含義就是：當你在代碼中 import jquery 的時候，不會把 jquery 打包到 bundle 中，而是使用我指定的全局中的 jQuery 對象
jquery: 'jQuery'
}
- 加載使用
import $ from 'jquery'
$('#app', {
width: 200,
height: 200,
backgroundColor: 'pink'
})
- 打包測試
npm run build
webpack 基礎
javascript 模塊化
整個web的發展越來越快，涉及到的東西以及要處理的越來越多，於是我們的JS代碼就越來越大，自然越來越混亂，就容易出錯。因此，我們把代碼閹割了。嗯，沒錯，就是我們把這個大西瓜切成很多塊，所以每個程序員都可以自己選擇一塊，然後吃一塊，不再是一個大西瓜一人吃一口了
- Node.js（服務端）
- AMD 模塊規範（用於瀏覽器）
- <span style="color:#fd7275"> require.js 庫 </span>
- CMD 模塊規範（用於瀏覽器）
- <span style="color:#fd7275"> sea.js 庫 </span>
- ECMAScript 6 模塊規範
webpack 模擬
準備
- 創建
webpack-demos學習目錄 - 創建
webpack-demos/src目錄 - 在
src目錄中分別創建以下兩個文件
import example from './example'
example()
export default function () {
console.log('Hello webpack!')
}
- 創建 webpack-demos/index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello webpack!</h1>
<!-- 瀏覽器無法直接運行模塊源碼 -->
<!-- <script src="src/index.js"></script> -->
</body>
</html>
webpack 打包
- 創建package.json文件
npm init
npm init -y
形成 package.json 文件
Wrote to c:\Users\lenovo\Desktop\webpack-dome\package.json:
{
"name": "webpack-dome",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2 安裝依賴
npm i -D webpack webpack-cli
3 打包命令
npx webpack
包的調用的方式：
① 引用API ② 命令的方式使用
npx 會找到項目中安裝的 webpack 或者全局的 webpack。
4 webpack 運行過程
- 默認找到 src/index.js
- 分析 src/index.js 所有的依賴
- 然後將打包結果輸出到 dist/mian.js 中
使用配置文件
創建webpack.config.js文件
const path = require('path')
module.exports = {
entry: './src/index.js', // 打包的入口
output: {
path: path.join(__dirname, './dist'), // 將打包結果放到 dist 目錄中
filename: 'main.js' // 自定打包結果的文件名
}
}
執行打包
npx webpack --config webpack.config.js
> npm run build #執行命令
配置 npm scripts
- 方式1
./node_module/.bin/webpack
-方式2
npx webpack
-方式3 <span style="color:#fd7275">（使用）</span>
{
"name": "webpack-demos",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js" //npn run build
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.0.0",
"file-loader": "^4.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"style-loader": "^0.23.1",
"webpack": "^4.35.2",
"webpack-cli": "^3.3.5"
}
}
javascript 模塊打包
模塊概念
在模塊化編程中，開發人員將程序分解爲稱爲模塊的離散功能塊,每個模塊的表面積小於完整程序，使驗證，調試和測試變得微不足道。編寫良好的模塊提供了可靠的抽象和封裝邊界，因此每個模塊在整個應用程序中具有一致的設計和明確的目的。
什麼是webpack模塊
<span style="color:#fd7275">webpack 模塊可以以各種方式表達它們的依賴關係</span>
-一個ES2015import聲明
-一個CommonJS的 require()聲明
-一個AMD define和require聲明
-css / sass / less文件中的@import語句。
-樣式表（url(...)）或html（<img src=...>）文件中的圖像URL 。
webpack 打包模式
//mode : 'none||production || development (默認) '
module.exports = {
mode: 'production'
};
- production 模式打包 上線適合
- development 開發模式打包 開發適合
- 如何沒有配置會有警告，默認是development
webpack 打包css
安裝兩個樣式包 style-loader css-loader
> npm install --save-dev style-loader css-loader
打包規則：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
打包測試：
1項目 添加樣式
|- /src
+ |- style.css
|- index.js
2添加 SRC / style.css文件
.hello {
color: red;
}
3 添加 SRC / index.js 文件
+ import './style.css';
+ element.classList.add('hello');
4 測試
npm run build
...
Asset Size Chunks Chunk Names
bundle.js 76.4 KiB 0 [emitted] main
Entrypoint main = bundle.js
...
webpack 打包圖片
添加依賴 ：npm install --save-dev file-loader
配置webpack.config.js 文件
module: {
rules: [
{
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
]
}
]
}
};
添加 一張圖片
|- /src
+ |- icon.png
添加引用 SRC / index.js
+ import Icon from './icon.png';
+ // Add the image to our existing div.
+ const myIcon = new Image();
+ myIcon.src = Icon;
+
+ element.appendChild(myIcon);
在css 中添加圖片 SRC / style.css文件
+ background: url('./icon.png');
合併命令
npm run build
...
Asset Size Chunks Chunk Names
da4574bb234ddc4bb47cbe1ca4b20303.png 3.01 MiB [emitted] [big]
bundle.js 76.7 KiB 0 [emitted] main
Entrypoint main = bundle.js
...
webpack 打包html
設置HtmlWebpackPlugin
安裝依賴：npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
new CleanWebpackPlugin()，// 打包前先清理dist目錄文件
plugins: [
+ new HtmlWebpackPlugin({
+ template:'html文件路徑'
minify： {
removeComments：true， //刪除註釋
cokkapseWhitespace：ture //壓縮
}
+ })
+ ],
清理dist 文件
HtmlWebpackPlugin默認情況下會生成自己的index.html文件，即使dist/文件夾中已有文件也是如此。這意味着它將index.html用新生成的文件替換我們的文件。 && 通常，/dist在每次構建之前清理文件夾是一種很好的做法，這樣只會生成使用過的文件。讓我們來處理。
new CleanWebpackPlugin()，// 打包前先清理dist目錄文件
添加依賴clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
添加 webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin(), // plugins:
webpack 字體文件
更新 webpack.config.js
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
添加文件 my-font.woff my-font.woff2
|- /src
+ |- my-font.woff
+ |-
更新文件 SRC / style.css文件
+ @font-face {
+ font-family: 'MyFont';
+ src: url('./my-font.woff2') format('woff2'),
+ url('./my-font.woff') format('woff');
+ font-weight: 600;
+ font-style: normal;
+ }
webpack 打包less文件
添加依賴 $ npm install less-loader --save-dev
更新文件 webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/,
loader: 'less-loader', // 將 less 轉爲 css，less-loader 依賴了 less
},
],
},
};
webpack ES6-ES5
安裝依賴: npm i -D babel-loader @babel/core @babel/preset-env
添加文件 ：
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
更多更新