- 云服務(wù)器優(yōu)惠
- 阿里云優(yōu)惠券
- 騰訊云優(yōu)惠券
- 京東云優(yōu)惠券
- 站點(diǎn)信息
- 問(wèn)題反饋
- 郵箱：[email protected]
關(guān)注微信
?2016-2026 Matools All rights reserved,
粵ICP備17059708號(hào)
什么是webpack?
官網(wǎng)給出的概念是:本質(zhì)上，webpack?是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack
處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency
graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè)?bundle。
為什么要用webpack?
為什么使用webpack,這應(yīng)該和前端的發(fā)展是有關(guān)系的,因?yàn)橛?jì)算機(jī)網(wǎng)絡(luò)的飛速發(fā)展,導(dǎo)致前端也在迅猛發(fā)展,最初的實(shí)踐方案已經(jīng)不能滿足我們的需求,加上新的技術(shù)和新思想框架的產(chǎn)生，為了節(jié)省開(kāi)發(fā)的成本和效率，所以webpack的產(chǎn)生是一個(gè)必然的結(jié)果
相比gulp、grunt、Rollup，為什么要使用webpack？
gulp和grunt的操作都是流式的,但是gulp是基于內(nèi)存流,grunt是基于文件流,所以相對(duì)來(lái)說(shuō),gulp的性能要高于grunt，而且他們都是需要定義一個(gè)個(gè)任務(wù)，然后自動(dòng)將一個(gè)個(gè)任務(wù)執(zhí)行。，而webpack是模塊化的組織，模塊化的依賴，然后模塊化的打包，相對(duì)來(lái)說(shuō)，webpack更強(qiáng)調(diào)模塊化開(kāi)發(fā)，而那些文件合并壓縮、預(yù)處理等功能，不過(guò)是他的附帶功能。而且現(xiàn)在相對(duì)于前兩者，webpack的插件也更為豐富
Rollup是在webpack流行后出現(xiàn)的替代品，Rollup和webpack類似，但是專注于ES6模塊打包，相比webpack,Rollup功能和插件都不如webpack完善，不過(guò)Rollup在用于打包JavaScript庫(kù)時(shí)比webpack更加有又是，因?yàn)槠浯虬拇a更小更快。但也因?yàn)楣δ懿煌晟?，很多?chǎng)景找不到現(xiàn)成的解決方案。
?
安裝與使用
因?yàn)楝F(xiàn)在webpack已經(jīng)更新到到4.0+了，所以本篇就直接按4.0+的來(lái)講好了
創(chuàng)建package.json文件
也叫初始化,可以手動(dòng)創(chuàng)建，也可以使用命令自動(dòng)創(chuàng)建，建議是命令創(chuàng)建
npm init
然后自己配置文件名、版本號(hào)等信息
如果想要快捷安裝的話，使用下面的命令（-y 表示使用默認(rèn)參數(shù)）
npm init -y
注意：1.package文件里面的name屬性的值如果用駝峰式命名的話，會(huì)報(bào)警告
2.
通過(guò)文件名我們就知道package.json文件是json的對(duì)象，所以語(yǔ)法肯定是嚴(yán)格按照json的格式，不能添加注釋，屬性和值只能用雙引號(hào)不能用單引號(hào)，不能多添加逗號(hào)
?
package.json文件說(shuō)明：
安裝
webpack可以直接使用npm安裝，因?yàn)槲覀冃枰褂脀ebpack這個(gè)命令，所以必須要全局安裝
npm i webpack -g
然后在項(xiàng)目中安裝
npm i webpack -S
注意點(diǎn)：webpack 4+以上的，都需要安裝webpack-cli，所以還需要安裝webpack-cli
npm i webpack-cli -S
按著上面的步驟安裝好之后，等你配置好webpack.config.js文件在終端輸入webpack時(shí)你可能會(huì)遇到下面這個(gè)問(wèn)題
解決辦法：全局安裝一下webpack-cli即可
npm i webpack -g
到此安裝步驟就已經(jīng)搞定了，下面教大家如何使用
使用
創(chuàng)建src文件夾、public文件夾和webpack.config.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>Document</title> </head> <body> <
divid="app"></div> <script src="bundle.js"></script> </body> </html>
配置webpack.config.js
module.exports = { mode:'development', // 當(dāng)前的開(kāi)發(fā)模式 entry: __dirname +
"/src/main.js",// 入口文件 output: { path: __dirname + "/dist",// 打包后的文件存放的地方
filename: "bundle.js"// 打包后輸出文件的文件名 } }
這些基礎(chǔ)配置完之后,我們?cè)陧?xiàng)目的終端輸入
webpack
就會(huì)輸出一下信息
看到這樣的信息的話,那么恭喜你,你的第一個(gè)webpack項(xiàng)目完成了
此時(shí)你會(huì)看到文件夾目錄下會(huì)多了一個(gè)dist文件夾
OK,上面的文件寫(xiě)法我們還可以做一下改進(jìn),例如文件的文件路徑問(wèn)題,我們需要寫(xiě)成的是絕對(duì)路徑,node里面有自帶一個(gè)path模塊,我們可以換成下面的寫(xiě)法
const path=require('path'); module.exports={ mode:'development', // 入口文件
entry:'./src/main.js', // 出口文件 output:{ filename:'bundle.js',
path:path.resolve(__dirname,'public') } }
上面這個(gè)是單個(gè)入口文件的寫(xiě)法,有單個(gè)入口的話,那肯定是有多個(gè)入口的啊,下面這段就是多個(gè)入口文件的寫(xiě)法:
const path=require('path'); module.exports={ mode:'development', //
多個(gè)入口的話,在這邊配置 entry:{ index:'./src/js/1.js', admin:'./src/js/index.js', },
output:{//
出口的名字就是上面entry定義的名字,上面定義的是index和admin,打包后在dist文件夾里面的js就是index.min.js和admin.min.js
filename:'[name].js', path:path.resolve(__dirname,'dist') } }
在出口文件處的filename中,就不需要寫(xiě)死bundle.js這些了,直接用name變量來(lái)接收,打包出來(lái)后的文件名字來(lái)源于entry中入口文件中的定義的鍵,如上面的就是index和admin
資源管理
webpack本身只能處理javascript,如果要處理其他類型的文件的話,就需要使用loader來(lái)進(jìn)行轉(zhuǎn)換。下面我就列舉了我們經(jīng)常用的幾個(gè)
css-loader---->引入css文件
我們可以在src文件夾里面新建一個(gè)css文件夾，然后在里面新建一個(gè)main.css文件。在webpack中，所有的文件都是一個(gè)模塊，所以要使用這個(gè)css文件，就必須要先引入
在main.js文件中引入css文件
import './css/main.css'
然后在終端輸入webpack后發(fā)現(xiàn)報(bào)錯(cuò)啦
這個(gè)時(shí)候呢，安裝一下css需要使用到的loader，然后在配置一下在試試
安裝
處理css需要使用到兩個(gè)loader，css-loader和style-loader
npm install --save-dev style-loader css-loader
在webpack.config.js中配置loader
module.exports={ // 當(dāng)前的開(kāi)發(fā)模式 // 開(kāi)發(fā)模式:development,會(huì)保留我們開(kāi)發(fā)時(shí)的一些必要信息 //
生產(chǎn)模式:production會(huì)盡力壓縮,能壓多大就壓多大 // none:什么也不干,就只是打包 mode:'development', entry:
'./src/js/main.js', output:{ filename:'bundle.js', path:path.resolve(__dirname,
'dist') }, // 添加的module里面的rules module:{ rules:[ { test:/\.css$/, //
webpack的loader執(zhí)行順序是反的,先執(zhí)行css-loader后執(zhí)行style-loader use:[ 'style-loader',
'css-loader' ] } ] } }
說(shuō)明: loader都是在module里面的rules中配置的,rules是一個(gè)數(shù)組配置規(guī)則,該規(guī)則告訴webpack符合test
的文件，使用use后面的loader處理,所以該規(guī)則就是對(duì)所有的.css文件使用css-loader、style-loader
注意點(diǎn)：loader的執(zhí)行順序是由右向左執(zhí)行的，先執(zhí)行css-loader后在執(zhí)行style-loader
在終端輸入webpack后，提示下面的信息就是成功啦
?常用的loader
資源 loader名
圖片 file-loader
sass saa-loader
less less-loader
babel babel-loader
字體 file-loader和url-loader
加載圖片
安裝
npm install --save-dev file-loader
配置loader
rules:[ { test:/\.css$/, // webpack的loader執(zhí)行順序是反的,先執(zhí)行css-loader后執(zhí)行style-loader
use:['style-loader', 'css-loader' ] }, + { + test: /\.(png|svg|jpg|gif)$/, +
use: [+ 'file-loader' + ] + } + ]
加載字體
webpack.config.js中配置
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }
加載less
安裝
npm install --save-dev less-loader less
配置
{ test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from
JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, {
loader:"less-loader" // compiles Less to CSS }] }
加載sass
安裝
npm install sass-loader node-sass --save-dev
配置:
{ test: /\.scss$/, use: [ "style-loader", // creates style nodes from JS
strings "css-loader", // translates CSS into CommonJS "sass-loader" // compiles
Sass to CSS, using Node Sass by default ] }] }
加載ES6及以上版本及jsx文件
安裝:
npm install -D babel-loader @babel/core @babel/preset-env
配置:
{ test: /\.(js|jsx)$/i, exclude: /node_modules/, use: { loader: 'babel-loader'
, options: { presets: ['@babel/preset-env'] } } }
總的配置集合
module:{ rules:[ // 加載css { test:/\.css$/, //
webpack的loader執(zhí)行順序是反的,先執(zhí)行css-loader后執(zhí)行style-loader use:[ 'style-loader',
'css-loader' ] }, // 加載圖片 { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader'
] },// 加載字體 { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }, //
加載less { test: /\.less$/, use: [{ loader: "style-loader" // creates style
nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS
}, { loader:"less-loader" // compiles Less to CSS }] }, // 加載sass { test:
/\.scss$/, use: [ "style-loader", // creates style nodes from JS strings
"css-loader",// translates CSS into CommonJS "sass-loader" // compiles Sass to
CSS, using Node Sass by default ] }, // 加載base64 { test: /\.(png|jpg|gif)$/i,
use: [ { loader:'url-loader', options: { limit: 8192 // 當(dāng)圖片小于8192K之后轉(zhuǎn)為base64 }
} ] },// 加載數(shù)據(jù) { test: /\.(csv|tsv)$/, use: [ 'csv-loader' ] }, { test: /\.xml$/
, use: ['xml-loader' ] },
// 加載ES6以上版本 { test: /\.(js|jsx)$/i, exclude: /node_modules/, use: {
loader:'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
Plugin
插件(Plugin)是用來(lái)擴(kuò)展webpack功能的,webpack可以實(shí)現(xiàn)loader所不能實(shí)現(xiàn)完成的復(fù)雜功能,使用plugin豐富的自定義API以及生命周期事件,可以控制webpack打包流程的每個(gè)環(huán)節(jié),實(shí)現(xiàn)webpack的自定義功能擴(kuò)展
html-webpack-plugin：生成html文件
html-webpack-plugin 可以根據(jù)你設(shè)置的模板，在每次運(yùn)行后生成對(duì)應(yīng)的模板文件，同時(shí)所依賴的 CSS/JS 也都會(huì)被引入，如果 CSS/JS
中含有 hash 值，則html-webpack-plugin 生成的模板文件也會(huì)引入正確版本的 CSS/JS 文件。
安裝
npm i html-webpack-plugin -D
修改配置文件
const path=require('path'); const HtmlPlugin=require('html-webpack-plugin');
module.exports= { entry: __dirname + "/src/main.js",//已多次提及的唯一入口文件 output: {
path:path.resolve(__dirname,'./dist'),//打包后的文件存放的地方 filename: "bundle.js"//
打包后輸出文件的文件名 }, module:{ rules:[ // 加載css { test:/\.css$/, //
webpack的loader執(zhí)行順序是反的,先執(zhí)行css-loader后執(zhí)行style-loader use:[ 'style-loader',
'css-loader' ] }, // 加載圖片 { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader'
] },// 加載字體 { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }, //
加載less { test: /\.less$/, use: [{ loader: "style-loader" // creates style
nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS
}, { loader:"less-loader" // compiles Less to CSS }] }, // 加載sass { test:
/\.scss$/, use: [ "style-loader", // creates style nodes from JS strings
"css-loader",// translates CSS into CommonJS "sass-loader" // compiles Sass to
CSS, using Node Sass by default ] }, // 加載base64 { test: /\.(png|jpg|gif)$/i,
use: [ { loader:'url-loader', options: { outputPath: 'images/', limit: 8*1024 //
當(dāng)圖片小于8192K之后轉(zhuǎn)為base64 } } ] }, // 加載數(shù)據(jù) { test: /\.(csv|tsv)$/, use: [
'csv-loader' ] }, { test: /\.xml$/, use: [ 'xml-loader' ] }, { test:
/\.(js|jsx)$/i, exclude: /node_modules/, use: { loader: 'babel-loader',
options: { presets: ['@babel/preset-env'] } } } ] }, plugins: [ new
HtmlPlugin(), ] }
配置完之后,你會(huì)看到在dist文件夾下面會(huì)多了一個(gè)index.html文件
如果你想打包一個(gè)固定的模板的話,你可以在實(shí)例化插件的時(shí)候添加參數(shù)配置
plugins: [ new HtmlPlugin({ template: './public/index.html' // 模板的地址 }), ]
分離css文件--MiniCssExtractPlugin
在webpack中,默認(rèn)css文件是一起打包進(jìn)js文件里面去的,如果你希望打包后css在單獨(dú)的文件中的話,name你就需要
MiniCssExtractPlugin（ExtractTextPlugin
在webpack4+版本中已經(jīng)廢棄掉了，如果使用4以下的版本的話，可以自行官網(wǎng)查api，也是類似的寫(xiě)法的）這個(gè)plugin了
安裝
npm i mini-css-extract-plugin -D
在webpack.config.js中的配置
const path=require('path'); const HtmlPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin'); module.exports =
{ entry: __dirname+ "/src/main.js",//已多次提及的唯一入口文件 output: {
path:path.resolve(__dirname,'./dist'),//打包后的文件存放的地方 filename: "bundle.js"//
打包后輸出文件的文件名 }, module:{ rules:[ // 加載css { test:/\.css$/, //
webpack的loader執(zhí)行順序是反的,先執(zhí)行css-loader后執(zhí)行style-loader use:[ { loader:
MiniCssExtractPlugin.loader, },'css-loader' ] }, ] }, plugins: [ new
HtmlPlugin({ title:'webpack test', template:path.join(__dirname,
'./public/index.html') }), new MiniCssExtractPlugin({ filename:'[name].css',
chunkFilename:'[id].css' }) ] }
配置完成后在終端輸入webpack,你會(huì)發(fā)現(xiàn)dist文件夾里面會(huì)多了一個(gè)main.css文件(前面已經(jīng)在src目錄下的css文件夾中新建了main.css,并導(dǎo)入到了main.js中),到這,css就已經(jīng)抽離出來(lái)啦
構(gòu)建運(yùn)行環(huán)境
我們平時(shí)開(kāi)發(fā)的時(shí)候,例如gulp都會(huì)區(qū)分開(kāi)發(fā)環(huán)境還是生產(chǎn)環(huán)境,這兩個(gè)環(huán)境下所要配置的一些參數(shù)肯定是要不一樣的,而且我們?cè)陂_(kāi)發(fā)環(huán)境下,并不需要打包。在這種情況下，我們要這么去區(qū)分運(yùn)行環(huán)境呢？webpack提供了一個(gè)webpack-dev-server工具給我們搭建本地運(yùn)行環(huán)境。有了這個(gè)插件之后，我們可以配置命令腳本快捷運(yùn)行
安裝webpack-dev-server
npm i webpack-dev-server -D
然后在package.json配置中的script里面腳本命令
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":
"webpack-dev-server ", "dev": "webpack-dev-server ", "build": "webpack" }
通過(guò)上面的代碼，我們可以知道，在看法環(huán)境下才要運(yùn)行項(xiàng)目環(huán)境，如果打包的時(shí)候就用build的那個(gè)命令來(lái)充當(dāng)生產(chǎn)環(huán)境
開(kāi)發(fā)環(huán)境命令使用
npm run start // 或 npm run dev
生產(chǎn)環(huán)境命令使用
生產(chǎn)環(huán)境下的話，我們需要做的是打包的工作
npm run build
?
了解npm 命令的話，我們應(yīng)該知道，在npm的命令腳本中，我們是可以添加參數(shù)的，我們可以通過(guò)添加參數(shù)來(lái)設(shè)置一下在開(kāi)發(fā)環(huán)境下自動(dòng)在默認(rèn)瀏覽器中打開(kāi)項(xiàng)目
默認(rèn)的端口是8080端口
修改默認(rèn)端口
嗯，有些時(shí)候我們的端口可能被其他項(xiàng)目占用著，所以為了項(xiàng)目得以運(yùn)行，肯定是要改一下端口的啊。我們可以在配置命令腳本的時(shí)候添加參數(shù)--port 端口號(hào)?
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":
"webpack-dev-server --open --port 3000", "dev": "webpack-dev-server ", "build":
"webpack" },
此時(shí)的端口就已經(jīng)改為了3000端口了
自動(dòng)熱更新
我們每次修改完都要重啟一下運(yùn)行環(huán)境，這樣的操作效率太低了，而且很浪費(fèi)時(shí)間，我們要怎么做到每次修改完他都會(huì)自動(dòng)更新呢，當(dāng)然是有解決方法的啊，添加--hot
參數(shù)即可
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":
"webpack-dev-server --open --port 3000 --hot", "dev": "webpack-dev-server ",
"build": "webpack" }
開(kāi)發(fā)的時(shí)候區(qū)分環(huán)境更項(xiàng)目配置的，可以查看我的上一篇的使用webpack構(gòu)建簡(jiǎn)易的vue-cli框架的筆記
?
熱門(mén)工具 換一換
感谢您访问我们的网站，您可能还对以下资源感兴趣：
调教肉文小说-国产成本人片免费av-空姐av种子无码-在线观看免费午夜视频-综合久久精品激情-国产成人丝袜视频在线观看软件-大芭区三区四区无码-啊啊好爽啊啊插啊用力啊啊-wanch视频网-国产精品成人a免费观看