新手快速上手webpack4打包工具的使用

Webpack CSS · 發表 2019-01-27 22:16:33

摘要：一直使用 webpack ,上次也分享過 webpack 配置 es6~9 的語法參考連結,但是對於一些小白童鞋來說,最基本的配置都不太知道,剛好利用春節休假期間對 webpack4 的知識點梳理一次。方便一些剛剛入行的人學習,也是對自己的一種總結與提高一、幾個盲點的解釋 ...

一直使用 webpack ,上次也分享過 webpack 配置 es6~9 的語法參考連結,但是對於一些小白童鞋來說,最基本的配置都不太知道,剛好利用春節休假期間對 webpack4 的知識點梳理一次。方便一些剛剛入行的人學習,也是對自己的一種總結與提高

一、幾個盲點的解釋

1、全域性安裝與區域性安裝
```
javascript
```
2、安裝包的時候 --save 與 -D 的區別
一般我們僅僅是在開發環境依賴的包直接使用 -D 就可以,這樣就會在專案的 package.json 檔案中的 devDependencies 新增相關的配置資訊
```
npm install webpack webpack-cli -D
複製程式碼
```
--save 是會放在 package.json 檔案的 dependencies 中
記住 僅僅是開發環境需要使用的包 就使用 -D

二、 `webpack` 所謂的0配置使用

webpack 是基於配置的前端腳手架,在實際專案中開發需要配置你需要的外掛與載入器。

1、 webpack 最基本的基重要的是:
plugins :配置外掛的
module :主要配置一些載入器
2、初始化專案
建立一個資料夾 webpack-demo
初始化生成 package.json 檔案
```
npm init --yes
複製程式碼
```

3、安裝 webpack 最基本的依賴包

npm install webpack webpack-cli -D
複製程式碼

4、建立一個資料夾 src 並在裡面建立一個 index.js 的檔案
5、在命令列中執行(先忽視警告資訊)
```
npx webpack
複製程式碼
```
6、在生成的 dist 資料夾下會生成一個大包好的 main.js 檔案,在該資料夾下建立一個 index.html 檔案引入 main.js ,在瀏覽器中檢視控制檯是否輸出資訊。

二、 `webpack` 的配置

1、在專案下建立一個 webpack.config.js 檔案

2、可以配置的有

const path = require('path');

module.exports = {
entry: '',// 打包檔案的入口
output: {}, // 打包後的出口檔案配置
devServer: {}, // 開發伺服器
module: {}, // 模組配置
plugins: {}, // 外掛的配置
mode: 'development', // ['development', 'production']模式
resolve: {}, // 配置解析
}
複製程式碼

三、配置開發環境(在記憶體中打包)

1、安裝包

npm install webpack-dev-server -D
複製程式碼

2、在 webpack.config.js 中配置入口檔案與出口檔案

module.exports = {
entry: './src/index.js',// 打包檔案的入口
output: {
filename: 'build.js',
// 注意這個位置必須是絕對路徑
path: path.join(__dirname, 'dist')
},
...
}
複製程式碼

3、配置開發 devServer

module.exports = {
...
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 8000,
compress: true, // 自動壓縮
open: true, // 自動開啟瀏覽器
},
}
複製程式碼

4、在 package.json 中配置命令

...
"scripts": {
"dev": "webpack-dev-server",
},
...
複製程式碼

5、除錯性的執行命令(會自動開啟瀏覽器,但是裡面沒任何資訊展示)
```
npm run dev
複製程式碼
```

6、使用 html-webpack-plugin 自動生成 html 頁面的外掛

1.安裝包

npm install html-webpack-plugin -D
複製程式碼

2.在 webpack.config.js 中引入

const HtmlWebpackPlugin = require('html-webpack-plugin');
複製程式碼

3.在 plugins 中配置

plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack測試',
})
],
複製程式碼

4.關於 index.html 的內容

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%=htmlWebpackPlugin.options.title%></title>
</head>

<body>

</body>

</html>
複製程式碼

5.關於 html-webpack-plugin 的配置請檢視
6、執行 npm run dev 直接開啟瀏覽器,開啟控制檯可以檢視到列印資訊

7、建立打包命令(在 package.json 中新增命令)

"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},
複製程式碼

8、使用雜湊值的方式建立隨機生成數字,解決快取的問題

1、對生成的 js 檔案生成隨機數

output: {
filename: 'build.[hash].js', // 預設生成20位的雜湊值
// filename: 'build.[hash:8].js' 可以定製生成多少位的隨機數
// 注意這個位置必須是絕對路徑
path: path.join(__dirname, 'dist')
},
複製程式碼

2、對 html 裡面引入的 js 生成雜湊值(會生成 ?雜湊值 )

plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack測試',
hash: true,
})
],
複製程式碼

3、執行命令 npm run build 可以檢視 dist 資料夾下的檔案是否帶了尾巴( 注意點:要更新檔案打包會生成新的,如果沒改動檔案,僅僅是多次打包是一樣的 )

4、執行後的效果

<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>
複製程式碼

9、關於 html-webpack-plugin 其它常用的配置

new HtmlWebpackPlugin({
...
minify: {
removeAttributeQuotes: true, // 去除雙引號
collapseWhitespace: true, // 合併程式碼到一行
}
})
複製程式碼

四、清除之前的 `plugin` 的外掛的使用

我們對每次打包後的快取檔案進行刪除確保每次都是最新的

1、安裝

npm install clean-webpack-plugin -D
複製程式碼

2、在 webpack.config.js 中使用

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(['./dist']),
...
],
複製程式碼

五、關於 `webpack` 入口檔案的幾種方式

1、單一入口檔案(參考上面)

2、多入口檔案(可以寫成一個數組),共同打包帶一個出口檔案中

module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/a.js'
],
output: {
filename: 'build.[hash:8].js',
// 注意這個位置必須是絕對路徑
path: path.join(__dirname, 'dist')
}
}
複製程式碼

3、多入口多出口多模板的模式

1.入口檔案與出口檔案的配置

module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
a: './src/a.js'
},
output: {
filename: '[name].[hash:8].js',
path: path.join(__dirname, 'dist')
}
}
複製程式碼

2.模板的配置(需要註明輸出檔案的名字)

...
plugins: [
new CleanWebpackPlugin(['./dist']),
new HtmlWebpackPlugin({
filename: 'index.html', // 註明打包後的檔名
template: './src/index.html',
title: 'webpack測試1',
hash: true,
chunks: ['index']// 註明選擇哪個js檔案
}),
new HtmlWebpackPlugin({
filename: 'a.html',
template: './src/index.html',
title: 'webpack測試2',
hash: true,
chunks: ['a']
})
],
}
...
複製程式碼

六、 `webpack` 熱更新的使用

1、根據上面的方式我們可以實現,修改 js 程式碼瀏覽器會重新整理,但是是類似我們人工的重新整理(如果是有狀態機的資料的時候會丟失資料)
2、我們可以使用 webpack 自帶的一個熱更新的外掛

3、使用方式

1.在 webpack.config.js 中配置

const webpack = require('webpack');
...
plugins: [
new webpack.HotModuleReplacementPlugin(),
...
]
...
複製程式碼

2.在主要的入口 index.js 檔案中加上

if (module.hot) {
module.hot.accept();
}
複製程式碼

七、配置載入 `css` 樣式的

webpack 預設是支援 js 的,對於別的 css 或者 typescript 必須要安裝載入器

1、安裝包

npm install style-loader css-loader less less-loader -D
複製程式碼

2、在 webpack.config.js 中的 module 配置規則( use 中是一個數組,從後面解析到前面)

...
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
}
]
},
...
複製程式碼

3、在 src 中建立一個 css 的資料夾,裡面建立 a.css 和 b.less 檔案

4、在 index.js 中引入樣式檔案

import './css/a.css';
import './css/b.less';
複製程式碼

5、啟動服務,檢視瀏覽器 Elements 欄

八、抽取成單獨的一個樣式檔案

上面的方式雖然可以載入樣式檔案,但是加載出來的全部的以 <style type="text/css">....</style> 的方式到頁面中,增加了 js 檔案的體積,如果專案大,可能會造成 js 檔案過大載入慢,甚至載入不出的弊端。

1、抽取單獨的 css 目前主要有2個包可以選擇

extract-text-webpack-plugin@next
mini-css-extract-plugin

2、安裝包

npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D
複製程式碼

3、使用 extract-text-webpack-plugin@next 外掛的方式

1.引包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
複製程式碼

2.修改 module 中的載入器

module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPligin.extract({
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: ExtractTextWebpackPligin.extract({
use: [
{ loader: 'css-loader' }, 
{ loader: 'less-loader' }
]
})
}
]
},
...
複製程式碼

3.使用外掛

plugins: [
...
new ExtractTextWebpackPligin({
filename: 'css/index.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack測試',
hash: true,
// 先註釋下面的程式碼,更好看結果
// minify: {
//removeAttributeQuotes: true, // 去除雙引號
//collapseWhitespace: true, // 合併程式碼到一行
// }
})
],
複製程式碼

4、在 index.js 中依然是匯入 css 檔案

import './css/a.css';
import './css/b.less';
複製程式碼

4、使用 mini-css-extract-plugin 外掛方式

1.導包

const MiniCssTractPlugin = require('mini-css-extract-plugin');
複製程式碼

2.在 module 中配置

module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssTractPlugin.loader,
{ loader: 'css-loader' }
]
},
{
test: /\.less$/,
use: [
MiniCssTractPlugin.loader,
{ loader: 'css-loader' }, 
{ loader: 'less-loader' }
]
}
]
},
複製程式碼

3.配置外掛

plugins: [
...
new MiniCssTractPlugin({
filename: 'css/css.css',
}),
]
複製程式碼

4.一樣的在 index.js 中導包
5.測試

九、抽取成多個單獨的樣式檔案

1、導包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
複製程式碼

2、預先例項化兩個輸出檔案的物件

const cssExtract = new ExtractTextWebpackPligin('css/a.css');
const lessExtract = new ExtractTextWebpackPligin('css/b.css');
複製程式碼

3、在 module 中預先例項化的物件

module: {
rules: [
{
test: /\.css$/,
use: cssExtract.extract({
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: lessExtract.extract({
use: [
{ loader: 'css-loader' }, 
{ loader: 'less-loader' },
]
})
}
]
},
複製程式碼

4、配置外掛

plugins: [
cssExtract,
lessExtract,
...
]
複製程式碼

5、執行命令 npm run build 檢視

十、關於抽取樣式修改後不重新整理的問題(開發的時候依然是加上 `style` 中)

1.定義 disable

const cssExtract = new ExtractTextWebpackPligin({
filename: 'css/a.css',
});
const lessExtract = new ExtractTextWebpackPligin({
filename: 'css/b.css',
});
複製程式碼

2.在 modul 中使用

module: {
rules: [
{
test: /\.css$/,
use: cssExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: lessExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' }, 
{ loader: 'less-loader' },
]
})
}
]
},
複製程式碼

十一、關於抽取的時候不引入未使用的樣式來簡單打包後的體積

1、安裝包

npm install purifycss-webpack purify-css glob -D
複製程式碼

2、匯入

const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');
複製程式碼

3、使用

...
// 注意必須要在HtmlWebpackPlugin後面使用
new PurifycssWebpack({
paths: glob.sync(path.resolve('src/*.html'))
})
...
複製程式碼

新手快速上手webpack4打包工具的使用

一、幾個盲點的解釋

二、 webpack 所謂的0配置使用

二、 webpack 的配置

三、配置開發環境(在記憶體中打包)

四、清除之前的 plugin 的外掛的使用

五、關於 webpack 入口檔案的幾種方式

六、 webpack 熱更新的使用

七、配置載入 css 樣式的

八、抽取成單獨的一個樣式檔案

九、抽取成多個單獨的樣式檔案

十、關於抽取樣式修改後不重新整理的問題(開發的時候依然是加上 style 中)

十一、關於抽取的時候不引入未使用的樣式來簡單打包後的體積

您可能也會喜歡…

二、 `webpack` 所謂的0配置使用

二、 `webpack` 的配置

四、清除之前的 `plugin` 的外掛的使用

五、關於 `webpack` 入口檔案的幾種方式

六、 `webpack` 熱更新的使用

七、配置載入 `css` 樣式的

十、關於抽取樣式修改後不重新整理的問題(開發的時候依然是加上 `style` 中)