webpack的入門實踐
我會將所有的讀者概括為初學者，即使你可能有基礎，學習本節之前我希望你具有一定的JavaScript和node基礎
- 文中的
... ...代表省略掉部分代碼，和上面的代碼相同 - 文中的文件夾如果沒有說創建，並且項目默認沒有的是需要你手動增加的
- 不會特別細緻，但是足夠入門
資源
- 視頻教程
- 我的個人博客
什麼是webpack
Web瀏覽器使用HTML，CSS和JavaScript。隨着項目的發展，跟蹤和配置所有這些文件變得非常複雜,解決這個問題就需要一個新的工具
類似webpack的工具還有Grunt和Gulp，webpack是模塊管理工具，把你的項目按照你的想法進行劃分模塊打包，舉個最簡單的例子，這個頁面需要加載一個 a.js和b.js，但是你只想加載一個js文件，就可以使用webpack將兩個文件進行合併，當然webpack的功能不止於此，代碼轉化、項目優化、代碼分割、代碼預編譯、自動構建、自動刷新…
再比如你想你的代碼兼容其他老的瀏覽器，你的css代碼兼容不同的瀏覽器內核，或者你想自動精簡掉你寫了但是沒有用到的代碼，這些都可以使用webpack實現
如果你是vue或者react等框架的使用者，肯定使用過 vue-cli 或 react-create-app 這類腳手架工具，那麼實現這個效果，就要學習webpack
快速入門
注意本文都是webpack4的內容
安裝
創建一個 webpackdemo文件夾，使用命令npm init -y快速初始化一個項目
安裝 webpack可以使用全局安裝
npm install webpack -g
但是我更推薦你在每個項目裏面單獨引入，這樣可以控製版本,如果你使用 webpack 4+ 版本，你還需要安裝 CLI。
npm install -D webpack@<version>
npm install -D webpack-cli
本文默認使用項目引入的方式，我們在根目錄下新建 src/index.js，webpack在不進行任何配置的情況下，會默認尋找這個文件
然後命令行執行node_modules\.bin\webpack,如果你是全局安裝的可以直接使用webpack命令
注意此時命令行爆黃色警告，這是沒有指定當前模式的原因，並且可以發現，目錄下多了一個 dist/main.js文件，這便是默認的輸出文件
為了體驗項目的打包，我們新建一個src/clg.js文件
export default function clg(msg) {
console.log(msg);
}
我們在index.js裏面導入並使用
import clg from './clg';
clg('webpack init');
然後根目錄我們新建一個 index.html文件，引入打包后的文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./dist/main.js"></script>
</head>
<body>
</body>
</html>
然後修改一下打包命令,指定當前為開發模式，再次運行.\node_modules\.bin\webpack --mode development
這次打包沒有爆警告，並且我們打開index.html控制台查看結果
webpack.config.js配置文件
在前面，我們都是使用webpack-cli為我們提供的默認配置，如果我們想使用webpack更強大的功能還是需要自定義配置文件的，在根目錄新建webpack.config.js，執行webpack命令的時候會自動找到它
const path = require('path');
module.exports = {
// 環境
mode: 'development',
// 目標文件
entry: [path.resolve(__dirname, './src/index.js')],
// 自定義輸出文件
output: {
path: path.resolve(__dirname, './dist'), //路徑
filename: 'main.js' //文件名稱
},
// 插件
plugins: [
],
// 給導入的文件制定規則
module: {
}
}
為了方便調試，我們在 package.json中添加命令，此時執行命令npm run dev或npm run build就非常方便了
注意 scripts命令裏面可省略
.\node_modules\.bin\使用npx webpack也是這個效果
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack --mode development",
"build":"webpack --mode production"
},
多個目標和輸出文件
在上面是一個目標文件index.js和一個輸出文件main.js，如果我們想要對多個目標文件進行打包，且輸出多個文件該怎麼辦呢？我們在根目錄新建一個 other.js
首先我們將entry修改為多個目標文件，並設置一個鍵名，然後修改輸出文件的名稱為變量[name]
const path = require('path');
module.exports = {
// 環境
mode: 'development',
// 目標文件
entry: {
index: path.resolve(__dirname, './src/index.js'),
other: path.resolve(__dirname, './src/other.js')
},
// [path.resolve(__dirname, './src/index.js'), path.resolve(__dirname, './src/other.js')],
// 自定義輸出文件
output: {
path: path.resolve(__dirname, './dist'), //路徑
filename: '[name].bundle.js' //文件名稱
},
}
此時我們執行 npm run build可發現dist目錄的多個js文件
使用插件來測試程序
在上面，我們自己創建了一個 index.html文件來測試我們打包的文件是否正常，其實webpack為我們提供了更為自動的方式，在這裏我們將使用第一個webpcak插件html-webpack-plugin,首先需要安裝它
npm i html-webpack-plugin -D
然後我們在 webpack.config.js中配置使用這個插件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 目標文件
entry: {
index: path.resolve(__dirname, './src/index.js'),
other: path.resolve(__dirname, './src/other.js'),
},
// 自定義輸出文件
output: {
path: path.resolve(__dirname, './dist'), //路徑
filename: 'main.js' //文件名稱
},
// 插件
plugins: [
new HtmlWebpackPlugin({
title: "Webpack init",
}),
],
}
此時，我們刪除 index.html文件，然後再次執行npm run build可以發現，webpack自動為我們創建了一個indedx.html文件，並引入了打包后的js文件
多個頁面
在上面，我們都是使用的一個 index.html單頁面，實際開發中漸進式的單頁面程序也比較多，但是還是會有多頁面的場景
簡單的修改一下webpack.config.js,多次實例化插件就可以了，filename為輸出文件名，chunks為這個頁面需要使用的js文件，當然如果你不是使用的自動生成頁面，可以使用template屬性指定你的頁面位置
module.exports = {
... ...
// 插件
plugins: [
new HtmlWebpackPlugin({
filename:"index.html",
title: "Webpack init",
chunks:['index']
}),
new HtmlWebpackPlugin({
filename:"other.html",
title: "Webpack init",
chunks:['other']
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
],
... ...
}
此時我們使用npm run dev,此時可以發現dist目錄輸出了兩個頁面並引入不同的js文件
source map
打包后的js文件都混淆到了一個或者多個文件中，丟失了原本的文件格式，如果在運行過程中出現bug，很難定位原本的錯誤位置 source map 就可以解決這個問題
為了更容易地追蹤錯誤和警告，JavaScript 提供了 source map 功能，將編譯后的代碼映射回原始源代碼。如果一個錯誤來自於
b.js，source map 就會明確的告訴你。
開啟 source map 非常簡單，只需要在配置文件webpack.config.js中增加
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
... ...
devtool: "cheap-module-eval-source-map",
... ...
}
為了驗證是否生效，我們在other.js中增加
console.log('other');
console.error("error")
然後使用npm run dev，接着在控制台查看錯誤並點擊，便能跳轉到出錯的位置
devtool有多個模式，不同的性能和品質，開發環境中我們希望性能更好，生產環境我們希望質量更好詳細配置
開發環境可以使用cheap-module-eval-source-map、eval 、eval-source-map
生產環境可以使用inline-source-map、inline-cheap-module-source-map、cheap-source-map
觀察模式和webpack-dev-server
在上面的內容中，每次修改內容后都需要手動執行構建命令，webpack為我們提供了更為自動的方法
觀察模式
我們只需簡單的修改一下命令npm run dev --watch,同樣的我們為了方便，可以直接將命令寫入 package.json中
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch":"webpack --mode production --watch"
},
此時，我們執行npm run watch命令后，只要修改文件中的內容，webpack即可自動構建
webpack-dev-server
但是在實際開發中，使用webpack-dev-server（簡稱wds）更為方便，它為我們提供了一個簡單的服務器，並且瀏覽器能夠實時加載，也就是說，當你修改文件保存后，瀏覽器可自動加載最新的內容，並且這一切都是發生在內存中，構建速度更快
安裝
npm i webpack-dev-server -D
同樣的我們在 package.json中添加一個命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch": "webpack --mode production --watch",
"server": "webpack-dev-server --mode development"
},
此時，我們只需執行npm run server，webpack便可自動創建一個服務器，並將項目運行在其中，當我們修改文件中的任意內容的時候，頁面便會自動刷新
如果使用過 vscode的插件live server的同學，不難發現，這就是類似的功能
我們還可以在 webpack.config.js中進一步的對 wds進行配置
module.exports = {
... ...
devServer: {
/**
* 日誌模式 friendly-errors-webpack-plugin 插件可以優化輸出
* errors-only 只在發生錯誤時觸發
* minimal 只在發生錯誤或者有新的編譯時輸出
* none 沒有輸出
* normal 標準輸出
* verbose 全部輸出
*/
stats: "errors-only",
//默認地址 localhost
host: process.env.HOST,
//默認端口 8080
port: process.env.PORT,
//是否直接打開瀏覽器
open: true,
},
... ...
}
此時我們再次運行 npm run server,webpack便能按照我們的配置來構建了
HMR
模塊熱替換(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允許在運行時更新各種模塊，而無需進行完全刷新。
在上面的內容中，我們修改文件的部分內容，webpack都需要將項目重新構建並通知瀏覽器重新渲染，這個過程十分浪費資源，使用 HMR就可以實現，修改哪裡，重新加載哪裡的這個效果
NamedModulesPlugin插件是在熱加載時直接返回更新文件名
使用 HMR我們只需要簡單的配置即可
webpack.config.js
... ...
const webpack = require('webpack');
module.exports = {
... ...
// 插件
plugins: [
... ...
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
... ...
//是否開啟熱更替
hot: true
},
}
為了驗證是否是局部更替，我么修改一下文件內容
index.js
import clg from './clg';
console.log('webpack init');
// module.hot Webpack通過全局變量公開HMR接口
if (module.hot) {
module.hot.accept('./clg.js', function () {
clg('檢測到clg模塊修改');
})
}
此時我們使用 npm run server 將項目運行起來，簡單的修改 index.js文件中內容，發現控制台只打印了
我們再次修改clg.js中內容，打個空格再保存即可，此時驗證了我們想要的效果
生產環境和開發環境分離
開發環境(development)和生產環境(production)的構建目標差異很大,官方建議為每個環境編寫彼此獨立的 webpack 配置。
我們將新建兩個配置文件webpack.dev.js（開發環境）和webpack.prod.js（生產環境）但是它們具有很多相同的配置，所以我們再新建一個webpack.common.js(通用配置)文件
我們使用webpack-merge插件來將不同的環境配置文件和通用配置文件進行合併，並且使用clean-webpack-plugin插件來每次重置我們的構建文件夾
npm i webpack-merge -D
npm i clean-webpack-plugin -D
webpack.common.js
const path = require('path');
const webpack = require('webpack');
const {
CleanWebpackPlugin
} = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [path.resolve(__dirname, './src/index.js')],
plugins: [
new CleanWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
title: 'Webpack init'
})
],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
]
}
};
webpack.dev.js
我們再開發環境配置文件中配置 server的相關信息，並且打開source-map
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode:"development",
devtool: 'eval',
devServer: {
stats: "errors-only",
//默認地址 localhost
host: process.env.HOST,
//默認端口 8080
port: process.env.PORT,
//是否直接打開瀏覽器
open: true,
//是否開啟熱更替
hot: true,
},
module: {
rules: [
//打包css文件的規則
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
});
webpack.prod.js
我們在生產環境配置文件中省略掉其他配置文件
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: "production",
});
然後我們在 package.json增加一些命令
"envdev":"webpack-dev-server --config webpack.dev.js",
"envbuild":"webpack --config webpack.prod.js"
此時，我們的項目構建就更加清晰了
管理資源文件
webpack不僅僅是打包 js文件這麼簡單，此處我們簡單的介紹幾個常用的資源打包方式，更詳細的內容可以參考官方文檔
管理css
使用過腳手架的同學應該都記得，項目裏面的css文件可以通過js直接引入的方式使用
import 'xxx.css';
來簡單實踐一下，首先安裝插件
npm i style-loader css-loader -D
為了展示我們的打包效果，我們新建一個 js/divdoc.js文件用來在頁面中渲染出一個字符串（此時我們已將clg.js也轉移到 ./js 文件夾）
export default function divdoc() {
//創建一個dom
let element = document.createElement('div');
element.innerHTML = "webpack init";
element.classList.add('init');
//將dom渲染到頁面上
document.body.appendChild(element);
}
在index.js中導入並使用
import clg from './js/clg';
import divdoc from './js/divdoc';
console.log('webpack init now');
divdoc();
// module.hot Webpack通過全局變量公開HMR接口
if (module.hot) {
module.hot.accept('./js/clg.js', function () {
clg('檢測到clg模塊修改');
})
}
此時運行 npm run server查看效果
接下來我們新建 src/css/app.css文件
我們前面渲染的dom節點是包含一個 class名為 init的
.init{
color: red;
}
編寫規則webpack.dev.js
module.exports = {
... ...
// 給導入的文件制定規則
module: {
rules: [
//打包css文件的規則
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
]
}
}
在index.js中導入，並查看效果
import './css/app.css';
順便可以打包一下less，首先安裝插件npm i -D less-loader,然後寫一下規則
module: {
rules: [
//打包css文件的規則
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
]
}
我們新建一個 src/css/app.less文件
.init{
color: red;
}
我們在 index.js中註釋掉原本導入的 app.css，然後導入less文件
import './css/app.less';
重新構建項目，查看項目，效果依然生效，同理sass、stylus也是這個用法，這裏不再贅述
分離css
在前面，我們打包css，最終都是將css代碼添加到頁面的 style標籤中，如果我們想將所有的css都打包到專門的文件裏面可以使用mini-css-extract-plugin插件
npm i mini-css-extract-plugin -D
然後修改一下配置webpack.prod.js
... ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
... ...
// 插件
plugins: [
new MiniCssExtractPlugin({
filename: "styles/[name].css",
})
],
// 給導入的文件制定規則
module: {
rules: [
//打包css文件的規則
// {
// test: /\.css$/,
// use: ['style-loader', 'css-loader']
// },
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader, 'css-loader'
],
}
]
}
... ...
}
此時我們執行npm run build可以發現dist目錄下面創建了一個index.css文件，因為我們是在 index.js中導入css文件的，[name]的值是js的文件名，而不是css的名
當然如果你想指定輸入和導出的css的名字也是可以的，使用這種方式，你就不需要在js中再次引入css文件了
entry: {
index: path.resolve(__dirname, './src/index.js'),
other: path.resolve(__dirname, './src/other.js'),
app: path.resolve(__dirname, './src/css/app.css')
},
webpack在處理樣式方面還有很多很強大的插件，比如purgecss可以精簡掉頁面中沒有使用的css樣式、Autoprefixer可以自動給你添加不同瀏覽器兼容的css插件
管理圖片和字體
在網頁中，圖片一般都是加載的網路路徑，但是在開發中我們都是使用的本地圖片，那麼為了保證上線后和本地的資源位置保持一致，我們可以使用webpack來進行一下打包，最後統一上傳oss存儲
首先需要安裝url-loader
npm i url-loader -D
然後我們在 webpack.common.js中進行配置
const path = require('path');
const webpack = require('webpack');
const {
CleanWebpackPlugin
} = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [path.join(__dirname, './src/index.js')],
plugins: [
new CleanWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
title: 'Webpack init'
})
],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
//靜態文件打包的網絡路徑
publicPath:'https://www.lookroot.cn/assets/'
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
//超過這個大小，圖片就打包為圖片，不超過就打包為base64格式的代碼
limit: 1000,
//打包文件名
name: "img/[hash].[ext]",
},
}
},
]
}
};
為了驗證，首先我們放一張圖片logo.jpg到src/asserts/img目錄下,我們簡單的修改一下app.css
.init {
color: red;
}
body {
background-image: url("../assets/img/logo.jpg");
background-repeat: no-repeat;
}
同樣的我們也可以在js代碼里使用圖片，修改一下divdoc.js
import logo from "../assets/img/logo.jpg";
export default function divdoc() {
... ...
// 插入一張圖片
let img = document.createElement('img');
img.src = logo;
element.appendChild(img);
... ...
}
然後使用npm run envdev運行起來，效果是正常的
然後我們使用npm run envbuild執行編譯，然後我們打開dist/img/main.css
body {
background-image: url(https://www.lookroot.cn/assets/img/494654d849ba012e2aab0505d7c82dc0.jpg);
background-repeat: no-repeat;
}
我們可以發現，webpack就給我們自動加上了網絡路徑，對於圖片的處理，還有可以優化圖片的[image-webpack-loader(https://github.com/tcoopman/image-webpack-loader)、可以自動生成雪碧圖的postcss-sprites
除了上面我說的這些資源外，webpack還支持非常多的資源格式，只要理解這個思想，使用也不難
代碼檢查和代碼轉換
Eslint代碼檢查
eslint是實際開發中非常常用的代碼檢查工具，我們在webpack中使用它來進行代碼檢查
首先安裝eslint、loader、錯誤格式化插件
npm i eslint eslint-loader eslint-friendly-formatter -D
然後我們在根目錄新建一個.eslintrc.json,當然你也可以使用命令npx eslint --init來初始化配置文件
rules代表規則，這裏我設置一個禁止使用 alert代碼來測試是否可以完成代碼檢查，更多規則請看文檔
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module"
},
"rules": {
"no-alert": 2
}
}
然後在webpack.dev.js中增加配置
module: {
rules: [
... ...
{
test: /\.js$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.resolve(__dirname, 'src')],
options: {
formatter: require('eslint-friendly-formatter')
}
}
]
}
然後我們在 index.js文件中增加一句alert("webpack init"),然後使用命令npm run envdev發現報錯，eslint成功捕捉到了錯誤
同樣的你還可以使用 StyleLint工具來檢查你的css代碼
babel代碼轉化
在實際開發中如果使用了 es6+的代碼，有些瀏覽器是不支持的，為了兼容，所有需要將代碼進一步轉化，可以使用babel進行轉化
babel的使用稍微比較繁瑣，本文只介紹在webpack的使用方法，更多細緻的東西請自行查閱
安裝本體和loader babel-loader @babel/core， @babel/preset-env是轉換插件的預設組合，@babel/plugin-transform-runtime用來解決一些瀏覽器不支持的方法和對象問題
npm i @babel/runtime -S
npm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
然後我們在根目錄新建一個配置文件.babelrc，使用@babel/preset-env提供的插件集合能完成大部分的工作了,targets表示我們的代碼要運行到哪些平台上面，更為詳細的請點擊
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"browsers": [ "ie >= 8", "chrome >= 62" ]
}
}
]
]
}
然後修改一下webpack.dev.js
module: {
rules: [
... ...
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
}]
}
]
}
為了驗證代碼是否轉換成功，我們在index.js中添加代碼
const say=(msg)=>{
console.log(msg);
}
然後使用命令npm run envdev，並打開source map 查看源文件，可以發現箭頭函數已經被轉換了
本節的內容就是這些，下一次將會有個簡單的實戰，對於webpack還有很多要學習的地方，比如打包優化、插件編寫等等學完基礎以後，這些就需要你自己去探索
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線
※Google地圖已可更新顯示潭子電動車充電站設置地點!!
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※別再煩惱如何寫文案,掌握八大原則!
