建站
咨詢
售后
建站咨詢
新聞中心
本篇文章給大家分享的是有關(guān)如何使用webpack構(gòu)建應(yīng)用，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、成都微信小程序、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十余年以來，已經(jīng)為千余家成都木屋各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)。現(xiàn)在，服務(wù)的千余家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。
如何使用webpack
npm init -y npm install webapck webpack-cli --save-dev touch webpack.config.js
在webpack.config.js中下面添加內(nèi)容
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};entry：工程資源的入口，可以是單個(gè)文件，也可以是多個(gè)文件，通過每一個(gè)資源入口，webpack會(huì)一次去尋找它的依賴進(jìn)行模塊打包。我們可以把entry理解為整個(gè)依賴樹的根，每個(gè)入口都將對應(yīng)一個(gè)最終生成的打包結(jié)果。
output：這是一個(gè)配置對象，通過它我們可以對最終打包的產(chǎn)物進(jìn)行配置，這里配置了兩個(gè)屬性，：
path：打包資源放置的路勁，必須為絕對路徑。
filename：打包結(jié)果的文件名。
定義好配置文件后，用npx webpack或者./node_modules/.bin/webpack執(zhí)行
使用loader
項(xiàng)目中需要引入一個(gè)css文件，如果直接用webpack去執(zhí)行就會(huì)報(bào)錯(cuò)，需要再webpack中加入loader機(jī)制
module.exports = {
...
module: {
rules: [
{
// 用正則去匹配 .css 結(jié)尾的文件，然后需要使用 loader 進(jìn)行轉(zhuǎn)換
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}編譯之前還需要安裝style-loader和css-loader
npm install --save-dev style-loader css-laoder
注意：
use屬性的值是一個(gè)使用loader名稱組成的數(shù)組，loader執(zhí)行的順序是從后往前的，由于loader執(zhí)行有順序，故不能寫成這樣
use: ['css-loader', 'style-loader']
每個(gè)loader都可以通過URL queryString的方式傳入?yún)?shù)，比如'css-loader?url'
style-loader的原理：是將css的內(nèi)容使用javascript的字符串存儲(chǔ)起來，在網(wǎng)頁執(zhí)行javascript時(shí)通過DOM操作，動(dòng)態(tài)地向HTML head標(biāo)簽里插入HTML style標(biāo)簽。
配置loader的方式也可以用Object來實(shí)現(xiàn)
use: ['style-loader', {
loader: 'css-loader',
options: {
url: true
}
}]使用plugin
loader的作用是被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)，插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)節(jié)中的變量。
如果想要使用一個(gè)插件，我們只需要require()它，然后把它添加到plugins數(shù)組中。我們可以在一個(gè)配置文件中因?yàn)椴煌哪康亩啻问褂糜靡粋€(gè)插件，因此我們可以使用new操作符來創(chuàng)建它的實(shí)列。
上面使用loader把css加載到j(luò)s中去，現(xiàn)在使用extract-text-webpack-plugin插件把bundle.js文件里的css提取到單獨(dú)的文件中
// 提取 css 的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module: {
rules: [
{
// 用正則去匹配 .css 結(jié)尾的文件，然后需要使用 loader 進(jìn)行轉(zhuǎn)換
test: /\.css$/,
loaders: ExtractTextPlugin.extract({
//轉(zhuǎn)換 .css需要使用的 loader
use: ['css-loader']
})
}
]
},
plugins: [
//從 js 文件中提取出來的 .css 文件名稱
new ExtractTextPlugin({
filename: 'main.css'
})
]編譯之前需要安裝extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin
執(zhí)行webpack時(shí)報(bào)錯(cuò)需要這樣安裝
npm install extract-text-webpack-plugin@next
DevServer
官方網(wǎng)站
安裝
npm install webpack-dev-server --save-dev
然后進(jìn)行簡單的配置
devServer:{
port: 3000,
publicPath: "/dist"
}然后用./node_modules/.bin/webpack-dev-server執(zhí)行
資源壓縮
npm i uglifyJSPlugin-webpack-plugin --save-dev
配置文件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
plugins: [
new UglifyJSPlugin({
//默認(rèn)是 false 需要手動(dòng)開啟
parallel: true
})
]或者
optimization: {
minimizer: [new UglifyJsPlugin()],
},按需加載
在代碼層面，webpack支持兩種方式進(jìn)行異步模塊加載，一種是CommonJS形式的require.ensure，一種是ES6 Module形式的異步import()
異步加載的腳本不允許使用document.write，所以將module.js的代碼改成console.log
export const log = function(){
console.log('module.js loaded.')
}編輯app.js，將module.js以異步的形式加載進(jìn)來
import('./module.js').then(module =>{
module.log()
}).catch(error => "An error occurred while loading the module")
document.write('app.js loaded.')修改配置
module.exports = {
mode: "production",
entry: './app.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
publicPath: "./dist"
},
}這里我們在output中添加了一個(gè)配置項(xiàng)publicPath，它是webpack中一個(gè)很重要有很容易引起迷惑的配置，當(dāng)我們的工程中有按需加載以及圖片和文件等外部資源時(shí)，就需要它來配置這些資源的路徑，否則頁面上就會(huì)報(bào)404，這里我們將publicPath配置為相對于html的路徑，使按需加載的資源生產(chǎn)在dist目錄下，并且能正確地引用到它。
重新打包之后你會(huì)發(fā)現(xiàn)打包結(jié)果中多出一個(gè)1.mian.js，這里面就是將來會(huì)被異步加載進(jìn)來的內(nèi)容。刷新頁面并查看chrome的network標(biāo)簽，可以看到頁面會(huì)請求1.main.js。它并不來源于index.html中的引用，而是通過main.js在頁面插入了script標(biāo)簽來將其引入的。
使用webpack的構(gòu)建特性
從2.0.0版本開始，webpack開始加入了更多的可以優(yōu)化構(gòu)建過程的特性。
tree-shaking
在關(guān)于模塊的那一篇文章中我們提到過，ES6 Module的模塊依賴解析是在代碼靜態(tài)分析過程中進(jìn)行的。換句話說，它可以在代碼的編譯過程中得到依賴樹，而非運(yùn)行時(shí)。利用這一點(diǎn)webpack提供tree-shaking功能，它可以幫助我們檢測工程中哪些模塊有從未被引用到的代碼，這些代碼不可能被執(zhí)行到，因此也稱為“死代碼”。通過tree-shaking，webpack可以在打包過程中去掉這些死代碼來減小最終的資源體積。
開啟tree-shaking特性很簡單，只要保證模塊遵循ES6 Module的形式定義即可，這意味著之前所有我們的例子其實(shí)都是默認(rèn)已經(jīng)開啟了的。但是要注意如果在配置中使用了babel-preset-es2015或者babel-preset-env，則需要將其模塊依賴解析的特性關(guān)掉，如：
presets: [
[env, {module: false}]
]這里我們測試一下tree-shaking的功能，編輯module.js:
// module.js
export const log = function() {
console.log('module.js loaded.');
}
export const unusedFunc = function() {
console.log('not used');
}打開頁面查看1.main.js的內(nèi)容，應(yīng)該可以發(fā)現(xiàn)unusedFunc的代碼是不存在的，因?yàn)樗鼪]有被別的模塊使用，屬于死代碼，在tree-shaking的過程中被優(yōu)化掉了。
tree-shaking最終的效果依賴于實(shí)際工程的代碼本身，在我對于實(shí)際工程的測試中，一般可以將最終的體積減小3%~5%。總體來看，我認(rèn)為如果要使tree-shaking發(fā)揮真正的效果還要等幾年的時(shí)間，因?yàn)楝F(xiàn)在大多數(shù)的npm模塊還是在使用CommonJS，因此享受不了這個(gè)特性帶來的優(yōu)勢。
scope-hoisting
scope-hoisting（作用域提升）是由webpack3提供的特性。在大型的工程中模塊引用的層級往往較深，這會(huì)產(chǎn)生比較長的引用鏈。scope-hoisting可以將這種縱深的引用鏈拍平，使得模塊本身和其引用的其它模塊作用域處于同級。這樣的話可以去掉一部分 webpack的附加代碼，減小資源體積，同時(shí)可以提升代碼的執(zhí)行效率。
目前如果要開啟scope-hoisting，需要引入它的一個(gè)內(nèi)部插件：
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
}scope-hoisting生效后會(huì)在bundle.js中看到類似下面的內(nèi)容，你會(huì)發(fā)現(xiàn)log 的定義和調(diào)用是在同一個(gè)作用域下了：
// CONCATENATED MODULE: ./module.js
const log = function() {
console.log('module.js loaded.');
}
// CONCATENATED MODULE: ./app.js
log();以上就是如何使用webpack構(gòu)建應(yīng)用，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁題目：如何使用webpack構(gòu)建應(yīng)用
新聞來源：http://www.ef60e0e.cn/article/ippsdh.html
