?相信你或多或少也聽說過webpack、gulp等這些前端構建工具。近年來webpack越來越火，可以說成為了前端開發(fā)者必備的工具。
如果你有接觸果vue或者react項目，我想你應該對它有所了解，其單單只是用來打包？這可不止，下面讓斌果帶你慢慢了解和使用webpack吧?。ㄓ捎谖以趯戇@篇文章的時候webpack最新版本是4.3 如果某些配置有變更，請自行查看官方最新文檔。）
?
一： 初識webpack
1.1 什么是webpack？
這個我直接引用官方文檔的介紹：
Webpack?是當下最熱門的前端資源模塊化?管理和打包?工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分割，等到實際需要的時候再異步加載。
在這里我就不多介紹了，百度一搜一大堆介紹，本文章主要是介紹webpack怎么用。
?
1.2 安裝webpack
因為webpack是基于nodejs實現(xiàn)的，所以要安裝webpack，先得安裝node
nodejs的中文網址：http://nodejs.cn/
下載完node之后，直接傻瓜式安裝就好，接著，我們打開命令行，看下node和vue的版本
當輸出版本號時，證明安裝成功。（建議node盡量8.0版本以上 npm盡量6.0版本以上）。
這里我比較建議用淘寶的鏡像，npm在國內實在是太慢了。
npm install -g cnpm --registry=https://registry.npm.taobao.org
當然，如果你網速快的話，用npm命令也沒關系。
首先，我們創(chuàng)建一個空的文件夾，就起名叫webpack吧，然后執(zhí)行一下初始化命令
npm init -y
接著安裝webpack和webpack-cli（建議局部安裝，全局安裝webpack可能會導致webpack版本不同而無法正常使用）
npm install webpack webpack-cli --save-dev 或者 cnpm install webpack webpack-cli -save-dev
由于我電腦網速比較慢，以下我全部用cnpm命令
?
1.3 webpack的初始化配置
首先我們在本件的一級目錄下創(chuàng)建一個src文件，src文件夾內再創(chuàng)建一個inde.js文件和一個index.html文件
src/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>初始化配置</title></head><body><div id="root">hello word!</div><script src="index.js"></script></body></html>?src/js:
var root = document.getElementById('root');var text = document.createElement('div');text.innerText = "斌果歡迎你！"root.append(text);當然packagej.json文件也要配置一下。
刪除“main”入口配置添加"private"為true
{ "name": "webpack", "version": "1.0.0", "description": "", "private":true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.30.0", "webpack-cli": "^3.3.0" }}這樣做主要是為了讓你的項目私有化，防止意外發(fā)布你的代碼。
接著，在一級目錄下再創(chuàng)建一個 webpack.config.js? 這個主要是webpack的配置文件
webpack.config.js
const path = require('path');module.exports = { entry:'./src/index.js', //打包文件的入口 output:{ //打包文件的出口 filename:'bundle.js', //打包后的文件名 path:path.resolve(__dirname,'dist') //打包后文件存放的位置 }}webpack使用的是common.js規(guī)范的語法，在webpack.config.js中設置了webpack打包的基本配置。
接著我們在控制臺中直接運行
npx webpack
?再回到項目中的，發(fā)現(xiàn)多了一個dist文件夾。里面有一個打包后的bundle.js文件，就這樣我們就將這個簡單的項目打包成功了。
你或許會問npx是什么，我怎么從來沒有用過，可能你一直都是在用npm run **? npx其實就是直接運行node_modules中的配置
當然你也可以在package.json中配置一下，像這樣
配置之后你運用npm run bundle 效果其實和運行 npx webpack是一樣，其最終還是運行npx webpack的命令.。
?
1.4 webpack的初次使用
在上一小節(jié)，你可能會覺得，這webpack打包完后好像也并沒有用，到底webpack是用來干嘛的？這一小節(jié)，就帶你用用webpak。
繼續(xù)上一節(jié)，我們在src下繼續(xù)創(chuàng)建header.js，connent.js、footer.js這三個文件.。
src/header.js
var root = document.getElementById('root');var text = document.createElement('div');text.innerText = "頭部內容"root.append(text);src/content.js
var root = document.getElementById('root');var text = document.createElement('div');text.innerText = "中部內容"root.append(text);src/footer.js
var root = document.getElementById('root');var text = document.createElement('div');text.innerText = "尾部內容"root.append(text);如果我們想將這三個js同時引入到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>簡單實例</title></head><body> <div id="root">hello word!</div> <script src="header.js"></script> <script src="content.js"></script> <script src="footer.js"></script></body></html>
這樣我們要引入3個js? 對性能的消耗是十分巨大的 ，加入有100個這樣的js文件，那我們不就要引入100個js？? 于是我們想可以可以只引入一個inde.js。就像下面那樣：
我們將src中引入的header、content、footer、index全部使用esModule語法如下
function header(){ var root = document.getElementById('root'); var text = document.createElement('div'); text.innerText = "頭部內容" root.append(text);}export default header;import header from './header'import content from './content'import footer from './footer'header();content();footer();
當我們打開html，就會發(fā)現(xiàn)報了個錯！
這是為什么呢？? 因為瀏覽器根本都不認識import是什么，是不認識es、common這些語言的,但是，webpack認識??！
我們直接運行? ? ?npx webpack
然后我們index.html中直接引入打包后的bundle.js，就會神奇的發(fā)現(xiàn)他成功運行而且沒報錯。
因為webpack已經幫我們將esModule語法轉化為瀏覽器能識別的法語告訴瀏覽器我要引入這三個js。
?
?
?
二、webpack的核心常用配置
?
2.1 HtmlWebpackPlugin
在上一章可以看到，當我們打包完成后，要自己將打包后的js代碼引入到html文件中，這顯得不那么智能。
HtmlWebpackPlugin插件做得工作就是在打包完成后，自動生成一個html文件，并將打包生成的js自動引入到html文件中。
首先安裝這個插件：??npm install html-webpack-plugin -D
安裝完成后，我們需要在webpack.config.js中配置一下：
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'); // 導入插件module.exports = { entry:'./src/index.js', //打包文件的入口 plugins:[ new HtmlWebpackPlugin({ template: 'src/index.html' // 其會根據該html文件作模板自動導入打包后的js ，然 }) // 后將生成的html放到出口文件夾中 ], output:{ //打包文件的出口 filename:'bundle.js', //打包后的文件名 path:path.resolve(__dirname,'dist') //打包后文件存放的位置 }}這樣的話就無需要我們自己配置html? 其會在出口文件夾自動生成打包后的html。
運行npx webpack后
?
?
2.2 CleanWebpackPlugin
當我們每次打包完文件后，都會生成一個新的dist文件覆蓋上一個dist文件，但如果上個dist中有一些其他的文件沒有被覆蓋掉，就會成為雜魚，當我們多次打包后，雜魚可能就會變得越來越多，嚴重影響開發(fā)。
CleanWebpackPlugin插件做得就是每次打包時都會刪除上一次打包的文件，而不是覆蓋，這就使得每一次打包后的文件都是嶄新的，而不會混合上一次遺留的文件。
首先安裝這個插件： npm install clean-webpack-plugin -D
接著配置一下webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin'); // 導入插件module.exports = { entry:'./src/index.js', //打包文件的入口 plugins:[ new HtmlWebpackPlugin({ template: 'src/index.html' //其會根據該html文件作模板自動導入打包后的js ，然 }), //后將生成的html放到出口文件夾中 new CleanWebpackPlugin() // 配置刪除的文件 ], output:{ //打包文件的出口 filename:'bundle.js', //打包后的文件名 path:path.resolve(__dirname,'dist') //打包后文件存放的位置 }}運行npx webpack 后
?
?
?2.3 Mode配置
當我們每次打包的時候都會提示如下警告?
這到底是什么呢？ 其實就是叫我們設置工作狀態(tài)，既mode
mode有兩種狀態(tài)，主要是用于表明當前開發(fā)狀態(tài)！
development: 開發(fā)模式? ? 打包后代碼沒有被壓縮
production:? ? 生產模式? ? ?打包后代碼被壓縮為一行
?
?
2.4 SourceMap配置
當我們的代碼報錯時，調試工具顯示的是打包后js的報錯行數(shù)，這樣我們很難找到原代碼到底在哪報錯。
SourceMap主要用于開發(fā)模式下使用，其能展現(xiàn)出打包后文件與源文件的映射關系。
這到底是怎么用的呢？ 查看下官方文檔可以看到有這么多參數(shù)，不急，慢慢來解釋：
?
表示性能較好，-表示性能較差? eval、inline、cheap、module等可以自由組合使用
none：不產生映射，速度最快。
eval：執(zhí)行速度也很快，性能最好，當時代碼提示不全面。
source-map:? 把映射文件生成到獨立的文件，一般不建議使用，打包速度過慢。
-inline-: 不單獨生成文件，將生成的映射文件以base64的格式插入到打包后的js文件中，精確顯示錯誤位置
-cheap-:代碼只顯示出錯代碼在第幾行，不精確顯示具體位置，有效提高打包效率。
-module-：不僅提示自己的業(yè)務代碼是否出錯，還提示第三方模塊中的代碼是否出錯。
在開發(fā)環(huán)境中，建議使用：cheap-module-eval-source-map?
在生產環(huán)境中，上線代碼一般不設置devtool。如果想知道報錯位置，建議使用：cheap-module-source-map
因為我們主要在開發(fā)環(huán)境下，所以我們使用cheap-module-eval-source-map
?
?
?2.5資源管理配置
2.5.1 加載css、sass、css前綴
首先我們先在src下創(chuàng)建一個index.css
src/index.css:
body{ background-color: blue;}接著我們在src中的index.js中導入css文件
src/index.js:
import header from './header'import content from './content'import footer from './footer'import './index.css' // 引入css文件header();content();footer();
由于webpack是無法識別以css后綴的文件，所以我們要引入loader(翻譯官)幫我們解析css.
我們需要安裝一下loader：??npm install style-loader css-loader --save-dev
安裝完成后，我們還需要在webpack.config.js中配置一下:
webpack.config.js:
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin'); //導入插件module.exports = { mode:'development', devtool:'cheap-module-eval-source-map', // 映射 entry:'./src/index.js', //打包文件的入口 module:{ rules:[ { test:/\.css$/, // 配置以css結尾的文件 use:[ // 添加翻譯官,順序為由下向上，由右向左 'style-loader', 'css-loader' ] } ] }, plugins:[ new HtmlWebpackPlugin({ template: 'src/index.html' //其會根據該html文件作模板自動導入打包后的js ，然 }), //后將生成的html放到出口文件夾中 new CleanWebpackPlugin() //配置刪除的文件 ], output:{ //打包文件的出口 filename:'bundle.js', //打包后的文件名 path:path.resolve(__dirname,'dist') //打包后文件存放的位置 }}由于css翻譯官解析后webpack還是不認識css文件，還需要使用style翻譯官去處理一下才能被webpack所解析。
運行npx webpack打包后，我們直接打開dist下的index.html文件，就可以看到css文件已經被成功引入.
加載sass也是類似，只需要添加一個sass-loader、node-sass就可以了！在這里就不加演示。
{ test:/\.scss$/, use:[ 'style-loader', 'css-loader', 'sass-loader' ] } 而加前綴的話,在不同瀏覽器前綴各有不同。
在這里我們只需要引入postcss-loader和autoprefixer就可以了
安裝一下 :?npm install postcss-loader autoprefixer --save-dev
在根目錄下創(chuàng)建一個postcss.config.js文件
postcss.config.js:
module.exports = { plugins:[ require('autoprefixer') ]}接著在webpack.config.js修改一下loader
{ test:/\.css$/, //配置以css結尾的文件 use:[ //添加翻譯官,順序為由下向上，由右向左 'style-loader', 'css-loader', 'postcss-loader' // 配置前綴 ] }, { test:/\.scss$/, use:[ 'style-loader', 'css-loader', 'sass-loader', //配置sass翻譯官 'postcss-loader' // 配置前綴 ] } 但是如果我們要在sass中再引入sass 這就會出錯，因為再引入的sass文件沒有經過翻譯官翻譯.
所以，我們還需要配置一下sass
{ test:/\.scss$/, use:[ 'style-loader', { loader:'css-loader', options:{ importLoader:2,// 如果sass文件還引入其他sass，另一個會重新從下向上開始解析 modules:true // 開啟css模塊打包 } }, 'sass-loader', //配置sass翻譯官 'postcss-loader' //配置前綴 ] } 2.5.2 加載圖片、字體
加載圖片主要使用兩個loader分別為 file-loader? url-loader
其兩個loader都是解析圖片。不過url-loader可以將小圖片轉化成base64的格式存放到打包后的css中
我們一般都是使用url-loader 這樣處理小圖片的時候就可以更快加載而無需引用原圖片地址。
安裝：?npm install url-loader file-loader -D
配置：
webpack.config.js:
{ test:/\.(png|jpg|gif|svg)$/, use:[ { loader:'url-loader', options:{ name:'[name].[ext]', outputPath:'images/', limit:8096 // 小于4K的圖片轉化為base64存放到打包后的js中 } } ] } 因為file-loader和url-loader可以加載任何文件,所以我們也可以用其來加載字體文件
webpack.config.js:
{ test:/\.(woff|woff2|eot|ttf|otf)&/, use:[ 'file-loader' ] }?2.5.3加載es6語法
由于很多低版本的瀏覽器都不支持ES6語法，所以，我們需要將ES6語言轉換為ES5的語法。
在以前我都是用babel-preset-es2015轉換的，現(xiàn)在官方推薦使用babel-preset-env轉換，我們就使用官方推薦的來轉換吧.
由于babel只轉換語法，需要使用babel-polyfill來支持新語法像promise這些。
首先我們先安裝依賴? npm install babel-loader @babel/core babel-preset-env @babel/polyfill -D
接著我們在webpack.config.js中配置一下
webpack.config.js:
{ test: /\.js$/, exclude: /node_modules/,//不需要對第三方模塊進行轉換，耗費性能 use:[ 'babel-loader' ] },因為bebel配置的信息太多了，我們可以在根目錄下創(chuàng)建一個.babelrc文件
.babelrc:
{ "presets":[["babel-preset-env",{ targets:{ //這個項目在大于什么版本上不轉換為es5 edge:"17", firfox:"60", chrome:"67", safari:"11.1", }, useBuiltIns:'usage' }]]}最后我們還需要在index.js中引入polyfill：
src/index.js:
import "@babel/polyfill";
但是如果在第三方模塊時使用@babel/polyfill會污染全局變量，所以我們可以使用runtime-transform插件
其與polifill類似，但不會污染全局變量其用法和上面差不多
我們安裝一下:
npm install babel-runtime babel-plugin-transform-runtime -D
在.babelrc中添加配置就可以了。
{ "plugins": ["transform-runtime"]}更多的配置可以參考官網文檔：babeljs.io/setup
?
?
2.6配置多個出入口文件
在目前，我們一直以一個index.js為入口，bundle.js文件為出口，但隨著程序的增加，我們可能需要輸出多個bundle文件。
這個很簡單，我們新建一個print.js文件，并添加一些邏輯
import Header from './header'Header();console.log('這是打包的第二入口文件');然后我們只需要修改一下webpack.config.js中的出入口配置就可以了。
webpack.config.js:
entry:{ main:'./src/index.js', //打包入口文件 print:'./src/print.js' },...... output:{ filename:'[name].js', //打包后的文件名 path:path.resolve(__dirname,'dist') //打包后文件存放的位置 }?
?
2.7熱更新配置
我們每次打包的時候，都需要手動運行npm run bundle 或者npx webpack這顯得什么繁瑣。
下面介紹幾個配置，可以在代碼發(fā)生變化后自動編譯代碼。
2.7.1觀察模式watch
我們只需要在package.json文件中添加一個用于啟動觀察模式的npm script腳本就可以了；
{ "name": "webpack", "version": "1.0.0", "description": "", "private": true, "scripts": { "bundle": "webpack", "watch": "webpack --watch" // 添加啟動腳本 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^9.5.1", "clean-webpack-plugin": "^2.0.1", "css-loader": "^2.1.1", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", "node-sass": "^4.11.0", "postcss-loader": "^3.0.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "url-loader": "^1.1.2", "webpack": "^4.30.0", "webpack-cli": "^3.3.0" }}這樣當我們修改js中的代碼時，其會自動執(zhí)行打包，我們只需要刷新一下頁面就可以看到變化。
2.7.2使用webpack-dev-server
當我們使用watch時，我們雖然可以自動打包，但是頁面不能自動刷新，需要我們手動刷新。
webpack-dev-server為我們提供了一個簡單的web服務器，能夠實時重新加載。
我們首先需要安裝一下：?npm install webpack-dev-server -D
接著我們需要修改webpack.config.js配置，告訴服務器，在哪里查找文件。
webpack.config.js:
......module.exports = { mode:'development', devtool:'cheap-module-eval-source-map', //映射 entry:{ //配置入口文件 main:'./src/index.js', print:'./src/print.js' }, devServer:{ contentBase:'./dist', // 配置運行目錄 open:true, // 自動打開瀏覽器 port:8080, // 服務器訪問端口 proxy:{ // 配置跨越代理 'api':'http://loacalhost:3000' } }, ...... plugins:[ new HtmlWebpackPlugin({ template: 'src/index.html' //其會根據該html文件作模板自動導入打包后的js ，然 }), //后將生成的html放到出口文件夾中 new CleanWebpackPlugin() //配置刪除的文件 ], output:{ //打包文件的出口 filename:'[name].js', //打包后的文件名 path:path.resolve(__dirname,'dist') //打包后文件存放的位置 }}然后我們只需要在package.json中添加一個script腳本用于啟動即可,
"scripts": { "bundle": "webpack", "watch": "webpack --watch", "server": "webpack-dev-server" // 啟動wepack-dev-server },運行npm webpack server 就可以看到webpack已經啟動了一個服務器。
2.7.3使用webpack-dev-middleware
webpack-dev-middleware是一個容器，它可以吧webpack處理后的文件傳遞給一個服務器。webpack-dev-server在內部就是使用了它。
這個僅僅了解就可以了，沒必要自己寫一個server，且性能沒有webpack-dev-server好。這里主要是配合express server來使用
首先我們自己安裝一下：npm install express webpack-dev-middleware --save-dev
然后我們需要在webpack.config.js中配置一下
output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/' // }接著我們需要創(chuàng)建一個server.js
const express = require('express');const webpack = require('webpack');const webpackDevMiddleware = require('webpack-dev-middleware');const app = express();const config = require('./webpack.config.js');const compiler = webpack(config);// Tell express to use the webpack-dev-middleware and use the webpack.config.js// configuration file as a base.app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath}));// Serve the files on port 3000.app.listen(3000, function () { console.log('Example app listening on port 3000!\n');});這時我們只需要在package.json中添加一個srcipt腳本然后直接運行腳本就可以了
"server": "node server.js",
?
?
2.8模塊熱替換(HMR)
當我們啟動server時，如果修改某個模塊，它就會整個網頁重新刷新，之前的操作又得重來。
HMR就是允許運行時更新各種模塊，而不用完全刷新。也就是只更新有變動的模塊，其他模板不動。
注：HMR只適合在開發(fā)環(huán)境下，并不適合在線上環(huán)境下配置。
因為HMR是webpack內置的插件，所以無需再下載，在使用之前，我們先將print.js刪除。再引入HMR的相關配置。
webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin'); //導入插件const webpack = require('webpack'); // 導入webpackmodule.exports = { mode:'development', devtool:'cheap-module-eval-source-map', //映射 entry:{ //配置入口文件 main:'./src/index.js' }, devServer:{ contentBase:'./dist', //配置運行目錄 open:true, //自動打開瀏覽器 port:8080, //服務器訪問端口 proxy:{ //配置跨越代理 'api':'http://loacalhost:3000' }, hot:true, // 開啟熱更新 hotOnly:true // 即使html錯誤，也不讓頁面更新， }, ...... plugins:[ new HtmlWebpackPlugin({ template: 'src/index.html' //其會根據該html文件作模板自動導入打包后的js ，然 }), //后將生成的html放到出口文件夾中 new CleanWebpackPlugin(), //配置刪除的文件 new webpack.NamedModulesPlugin(), // 以便更容易查看要修補(patch)的依賴 new webpack.HotModuleReplacementPlugin() // 使用模塊熱替換插件 ], output:{ //打包文件的出口 filename:'[name].js', //打包后的文件名 path:path.resolve(__dirname,'dist') //打包后文件存放的位置 }}到這里還沒有完? 要想實現(xiàn)熱替換，還要配置一下index.js
import header from './header'import content from './content'import footer from './footer'import './index.css' //引入css文件header();content();footer();//如果模塊啟用了HMR，就可以用 module.hot.accept(),監(jiān)聽模塊的更新。if (module.hot) { module.hot.accept('./header.js', function() { header() }) } 當我們單修改header.js時，其他模塊并不會影響，只會更新header模塊的內容。但我們會發(fā)現(xiàn)修改header會創(chuàng)建一個新的dom。
這是因為我們每次更新header模塊都創(chuàng)建了一個dom 我們需要先修改一下js代碼在更新前先清除之前添加的dom節(jié)點。
所以在使用HMR時要根據不同的代碼做相應的設置。
HMR修改樣式表
這個就更簡單了，其實在上面我們應該實現(xiàn)了這個功能，無須做任何修改，當我們修改css樣式時，其他模塊是不會刷新的。無需設置module.hot.accept。
因為style-loader已經幫我們在后臺使用?module.hot.accept?來修補(patch)?<style>?標簽。
?
來源：http://www.icode9.com/content-4-169901.html