JavaScript中Webpack的使用教程
0.什么是Webpack
Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。
1.Webpack的使用
1.初始化項目
npm init
2.安裝Webpack需要的包
npm install --save-dev webpack-cli webpack
3.配置Webpack
在 package.json 文件添加執(zhí)行編譯的命令
"scripts": {
"webpack": "webpack"
// 可自定義配置文件："webpack": "webpack --config webpack.js"
},
4.創(chuàng)建配置文件（默認(rèn) webpack.config.js），并配置。
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
5.打包并測試
C:\Users\Daixiang\Desktop\demo>npm run webpack > demo@1.0.0 webpack C:\Users\Daixiang\Desktop\demo > webpack --config webpack.config.js asset bundle.js 4.34 KiB [compared for emit] (name: main) runtime modules 670 bytes 3 modules cacheable modules 231 bytes ./src/index.js 159 bytes [built] [code generated] ./src/Base.js 72 bytes [built] [code generated] webpack 5.59.1 compiled successfully in 113 ms
2.Webpack 的核心概念
- entry 指定入口文件。
- output 指定輸出相關(guān)信息。
- loader 可以幫助 webpack 處理那些非 JavaScript 文件。
- plugins 用于執(zhí)行范圍更廣的任務(wù)。
2.1 entry
2.1.1 單入口
單入口的兩種寫法：
寫法一：entry: ‘./src/index.js'
寫法二：entry: {main: ‘./src/index.js'}
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
// entry: './src/index.js',
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
2.1.2 多入口
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
// 多入口
entry: {
main: './src/index.js',
base: './src/Base.js',
about: './src/About.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
2.2 output
2.2.1 單入口時的輸出
單入口時，自定義輸出文件名。
webpack.config.js
output: {
// 路徑
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: 'bundle.js',
},
2.2.2 多入口時的輸出
多入口時，動態(tài)輸出文件名。
webpack.config.js
output: {
// 路徑
path: path.resolve(__dirname, 'dist'),
// 動態(tài)輸出文件名
filename: '[name].js',
},
2.3 loader
loader是讓W(xué)ebpack處理非js文件的模塊。
loader配置參考文檔：https://webpack.docschina.org/loaders/
webpack.config.js
module: {
rules: [
{
// 正則匹配文件
test: /\.js$/,
// 排除文件夾
exclude: /node_modules/,
// 使用指定loader
loader: 'babel-loader'
}
]
}
需要注意的是，編譯新增API需要引入core-js
1.使用npm安裝core-js
npm install --save-dev core-js
2.在js入口文件中引入core-js/stable
import 'core-js/stable';
3.打包并測試
npm run webpack
2.4 plugins
plugins是插件，用于執(zhí)行范圍更廣的任務(wù)。
plugins配置參考文檔：https://webpack.docschina.org/plugins
以html-webpack-plugin為例，進(jìn)行插件安裝。
1.使用npm安裝html-webpack-plugin
npm install --save-dev html-webpack-plugin
2.配置webpack.config.js文件
const HtmlWebpackPlugin = require(‘html-webpack-plugin');
plugins: [new HtmlWebpackPlugin()],
webpack.config.js
const path = require('path');
// 引入文件，定義常量
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
search: './src/search.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [
{
// 正則匹配
test: /\.js$/,
// 排除文件夾
exclude: /node_modules/,
// 使用指定loader
loader: 'babel-loader'
}
]
},
plugins: [
// 單入口
// new HtmlWebpackPlugin(
// {
// 指定模板文件，生成的js等文件放入模板文件里
// template: './index.html'
// }
// )
// 多入口
new HtmlWebpackPlugin(
{
template: './index.html',
filename: 'index.html',
chunks:['index'],
minify: {
// 刪除注釋
removeComments: true,
// 刪除空格
removeWhitespace: false,
// 刪除html標(biāo)簽屬性的雙引號
removeAttributeQuotes: true
}
}
),
new HtmlWebpackPlugin(
{
template: './search.html',
filename: 'search.html',
chunks:['search']
}
)
],
};
3.打包并測試
npm run webpack
index.html
<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<title>index</title>
<script defer=defer src=index.js></script></head>
<body>
</body>
</html>
search.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>search</title>
</style>
<script defer src="search.js"></script>
</head>
<body>
</body>
</html>
3.Webpack處理css文件
3.1 < style>標(biāo)簽形式嵌入html
1.安裝css-loader識別js中的css文件，安裝style-loader，將css文件嵌入html中
npm install --save-dev css-loader style-loader
2.配置webpack.config.js文件
webpack.config.js
module: {
rules: [
{
// 正則匹配
test: /\.css$/,
// 使用css-loader,識別js中的css，使用style-loader,將css文件嵌入html中
// 注意數(shù)組的順序，從右向左使用
use: ['style-loader', 'css-loader']
}
]
},
3.打包并測試
npm run webpack
3.2 < link>標(biāo)簽形式引入html
使用css-loader,識別js中的css，使用mini-css-extract-plugin引入css文件。
1.安裝css-loader、mini-css-extract-plugin
npm install --save-dev css-loader mini-css-extract-plugin
2.配置webpack.config.js文件
webpack.config.js
const path = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
search: './src/search.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [
......
{
// 正則匹配
test: /\.css$/,
// 使用css-loader,識別js中的css，使用MiniCssExtractPlugin.loader,引入css文件
// 注意數(shù)組的順序，從右向左使用
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin(
{
filename: 'css/[name].css'
}
)
],
};
3.打包并測試
npm run webpack
dist/index.html
<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<title>index</title>
<script defer=defer src=index.js></script>
<link href=css/index.css rel=stylesheet>
</head>
<body>
</body>
</html>
4.Webpack處理css中的圖片
4.1 使用file-loader處理css中的圖片
使用file-loader處理css中的圖片。（v5 已棄用file-loader）
file-loader參考文檔：https://v4.webpack.js.org/loaders/file-loader/
index.css
body{
background-image: url(./images/3.jpg);
background-repeat: no-repeat;
}
1.安裝file-loader
npm install --save-dev file-loader
2.配置webpack.config.js文件
webpack.config.js
const path = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
search: './src/search.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [
......
{
// 正則匹配
test: /\.css$/,
// 使用css-loader,識別js中的css，使用MiniCssExtractPlugin.loader,引入css文件
// 注意數(shù)組的順序，從右向左使用
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader'
]
},
{
// 正則匹配
test: /\.(jpe?g|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]'
}
}
}
]
},
plugins: [
// 多入口
new HtmlWebpackPlugin(
{
template: './index.html',
filename: 'index.html',
chunks: ['index'],
minify: {
// 刪除注釋
removeComments: true,
// 刪除空格
collapseWhitespace: false,
// 刪除html標(biāo)簽屬性的雙引號
removeAttributeQuotes: true
}
}
),
new HtmlWebpackPlugin(
{
template: './search.html',
filename: 'search.html',
chunks: ['search']
}
),
new MiniCssExtractPlugin(
{
filename: 'css/[name].css'
}
)
],
};
3.打包并測試
npm run webpack
4.2 使用html-withimg-loader處理html中的圖片
1.安裝html-withimg-loader
npm install --save-dev html-withimg-loader
2.配置webpack.config.js文件
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
search: './src/search.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [
{
// 正則匹配
test: /\.js$/,
// 排除文件夾
exclude: /node_modules/,
// 使用指定loader
loader: 'babel-loader'
},
{
// 正則匹配
test: /\.css$/,
// 使用css-loader,識別js中的css，使用MiniCssExtractPlugin.loader,引入css文件
// 注意數(shù)組的順序，從右向左使用
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader'
]
},
{
// 正則匹配
test: /\.(jpe?g|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]',
esModule: false
}
}
},
{
// 正則匹配
test: /\.(html?)$/,
loader: 'html-withimg-loader'
}
]
},
plugins: [
// 多入口
new HtmlWebpackPlugin(
{
template: './index.html',
filename: 'index.html',
chunks: ['index'],
minify: {
// 刪除注釋
removeComments: true,
// 刪除空格
collapseWhitespace: false,
// 刪除html標(biāo)簽屬性的雙引號
removeAttributeQuotes: true
}
}
),
new HtmlWebpackPlugin(
{
template: './search.html',
filename: 'search.html',
chunks: ['search']
}
),
new MiniCssExtractPlugin(
{
filename: 'css/[name].css'
}
)
],
};
3.打包并測試
npm run webpack
4.3 使用file-loader處理js中的圖片
index.js
import img from './images/1.jpg';
1.安裝file-loader
npm install --save-dev file-loader
2.配置webpack.config.js文件
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
search: './src/search.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [
......
{
// 正則匹配
test: /\.(jpe?g|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]',
esModule: false
}
}
}
]
},
};
3.打包并測試
npm run webpack
4.4 使用url-loader處理圖片
index.js
import img from './images/1.jpg';
1.安裝url-loader、file-loader
npm install --save-dev url-loader file-loader
2.配置webpack.config.js文件
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
search: './src/search.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [
......
{
// 正則匹配
test: /\.(jpe?g|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: 'img/[name].[ext]',
esModule: false,
limit: 10000 // 小于10k的圖片轉(zhuǎn)為base64格式
}
}
}
]
},
};
3.打包并測試
npm run webpack
到此這篇關(guān)于JavaScript中Webpack的使用的文章就介紹到這了,更多相關(guān)JavaScript Webpack使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了ES6中l(wèi)et 和 const 的新特性，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了javascript伸縮菜單欄實現(xiàn)代碼，點擊標(biāo)題顯示下級菜單，節(jié)約了空間，使頁面排版更加緊湊，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)密碼框驗證信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了微信小程序緩存支持二次開發(fā)封裝實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了chrome監(jiān)聽cookie變化與賦值問題,cookie監(jiān)聽與賦值操作需要manifest文件里聲明權(quán)限問題，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細(xì)介紹了原生js輪播特效，簡單實用的代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
詳解JS如何使用Promise緩存網(wǎng)絡(luò)請求
網(wǎng)絡(luò)請求是現(xiàn)代Web應(yīng)用中的常見操作,很多時候需要獲取服務(wù)器上的數(shù)據(jù),在進(jìn)行網(wǎng)絡(luò)請求時,為了減輕服務(wù)器的壓力,緩存策略常被用來避免對同一數(shù)據(jù)的重復(fù)請求,本文將探討如何使用Promise結(jié)合緩存來高效處理網(wǎng)絡(luò)請求,需要的朋友可以參考下2023-12-12
mqtt.js?無法連接/錯誤提示?WebSocket?connection?to?‘ws://xxxxx‘?
這篇文章主要介紹了mqtt.js?無法連接/錯誤提示?WebSocket?connection?to?‘ws://xxxxx‘?failed:,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
js jquery數(shù)組介紹，數(shù)組時編程中比較常用的處理，需要的朋友可以參考下2012-07-07
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)公告自動滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05