資訊專欄INFORMATION COLUMN
摘要：它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。可以將多種靜態(tài)資源轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁(yè)面的請(qǐng)求。因此我們不再按文件文件的方式運(yùn)行指令，而是直接運(yùn)行這樣便能實(shí)現(xiàn)打包。
一、什么是webpack
是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁(yè)面的請(qǐng)求。
二、安裝和命令行
1、新建一個(gè)目錄，進(jìn)入目錄，初始化
2、安裝
全局安裝
在輸出版本時(shí)，顯示，要安裝webpack-cli
這樣就能輸出版本，可以看到我安裝的是4.2.0，這里要注意，自webpack4之后，使用有很大的變化
局部安裝
（1）練習(xí)（坑）：處理js文件，在項(xiàng)目根目錄下，新建hello.js，然后打包
顯示沒有配置webpack的mode選項(xiàng)，默認(rèn)有production和development兩種，我們輸入
依然有錯(cuò)：未找到入口模塊發(fā)成錯(cuò)誤，
這是因?yàn)閣ebpack4.x是以項(xiàng)目根目錄下的./src/index.js作為入口，所以我們要新建src目錄且改hello.js為index.js
這里還要注意：
webpack4.x的打包已經(jīng)不能用webpack 文件a 文件b的方式，而是直接運(yùn)行webpack --mode development或者webpack --mode production，這樣便會(huì)默認(rèn)進(jìn)行打包，入口文件是"./src/index.js"，輸出路徑是"./dist/main.js"，其中src目錄即index.js文件需要手動(dòng)創(chuàng)建，而dist目錄及main.js會(huì)自動(dòng)生成。
因此我們不再按webpack 文件a 文件b的方式運(yùn)行webpack指令，而是直接運(yùn)行
這樣便能實(shí)現(xiàn)打包。
每次這樣寫是不是都點(diǎn)麻煩，我們可以在package.json中
每次執(zhí)行就可以：
（2）練習(xí)：處理css文件
新建一個(gè)css文件style.css，在index.js中引入
然后打包：
會(huì)報(bào)如上錯(cuò)誤，是因?yàn)閣ebpack不支持css文件類型，需要依賴loader
css-loader：使webpack可以處理css文件
style-loader：新建一個(gè)style標(biāo)簽，把css-loader處理過的文件放進(jìn)去，然后插入到HTML標(biāo)簽中
安裝之后使用（直接在文件前）：
或者（在命令行）：
那每次更新都要執(zhí)行一次，有沒有自動(dòng)更新的？？？
（3）其他參數(shù)：
--progerss：會(huì)出現(xiàn)打包過程，有百分比進(jìn)度條
--display-modules：會(huì)把所有打包的模塊列出來
--display-reasons：會(huì)把打包的原因列出來
三、webpack的配置
（1）新建一個(gè)項(xiàng)目并初始化
上面：將會(huì)打包。。。main.js文件到。。。bundle.js文件
多文件輸入：
四、自動(dòng)生成HTML頁(yè)面文件
（1）安裝html-webpack-plugin插件
（2）在webpack配置package.config.js中
（3）傳參使用
1、參數(shù)
在根目錄下的index.html中
生成的dist/index.html中
2、上線地址
在生成的index.html中
3、html壓縮
4、多頁(yè)面應(yīng)用，生成多個(gè)html文件
五、loader的配置
1、解析es6語(yǔ)法
（1）安裝babel
（2）配置webpack
2、解析css
（1）安裝style-loader和css-loader
（2）配置webpack
（3）在項(xiàng)目中經(jīng)常有類似-webkit的前綴，每次寫很麻煩，這里就要用到postcss-loader,后處理loader
配置webpack
新建一個(gè)postcss.config.js文件和webpack.config.js同級(jí)
此時(shí)，如果你打包，并不會(huì)報(bào)錯(cuò)，但是前綴可能也沒有，所以需要在package.json中加入
3、解析less
（1）安裝
（2）webpack的配置
4、解析sass
sass的使用和less一樣，只要把less改為sass就行了
5、處理html模板文件
（1）安裝html-loader
（2）配置
（3）使用
layer.js
app.js
6、使用ejs模板文件，后綴為tpl或ejs
（1）安裝
（2）配置
（3）使用
layer.tpl
layer.js
app.js
7、用file-loader處理圖片
（1）安裝
（2）配置
（3）使用
layer.less
若是在.tpl或.ejs中使用
（4）也可以加參數(shù)
8、使用url-loader處理圖片（會(huì)影響文件大小）
9、通過image-webpack-loader和url-loader結(jié)合：先有image-webpack-loader打包，在通過url-loader
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96566.html
摘要：開箱即用的多頁(yè)面腳手架基于模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站感興趣的朋友，請(qǐng)點(diǎn)個(gè)及時(shí)關(guān)注項(xiàng)目更新請(qǐng)點(diǎn)個(gè)項(xiàng)目請(qǐng)?zhí)崽匦灾С智昂蠖朔蛛x開發(fā)配置完整的打包方案支持本地開發(fā)熱更新集成代碼風(fēng)格校驗(yàn)支持編寫源碼，編譯生成生產(chǎn)代碼內(nèi)置開發(fā)環(huán)境，自動(dòng)加樣式前綴自 Webpack-seed 開箱即用的多頁(yè)面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vu...
摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測(cè)到文件的變化，然后為你執(zhí)行一系列的自動(dòng)化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對(duì)第三方類庫(kù)使用各種模塊化寫法以及語(yǔ)法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個(gè)職位叫做 軟件開發(fā)工程師 在那個(gè)時(shí)代，大家可能...
摘要：原作者原鏈接基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁(yè)面應(yīng)用。 原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（CC BY-...
摘要：原作者原博文地址基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁(yè)面應(yīng)用。 原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（...
摘要：先看下官方文檔中對(duì)模塊的描述在模塊化編程中，開發(fā)者將程序分解成離散功能塊，并稱之為模塊。每個(gè)模塊具有比完整程序更小的接觸面，使得校驗(yàn)調(diào)試測(cè)試輕而易舉。 先看下webpack官方文檔中對(duì)模塊的描述： 在模塊化編程中，開發(fā)者將程序分解成離散功能塊(discrete chunks of functionality)，并稱之為模塊。每個(gè)模塊具有比完整程序更小的接觸面，使得校驗(yàn)、調(diào)試、測(cè)試輕而易...
閱讀 1654·2019-08-30 13:04
閱讀 2205·2019-08-30 12:59
閱讀 1764·2019-08-29 18:34
閱讀 1857·2019-08-29 17:31
閱讀 1255·2019-08-29 15:42
閱讀 3530·2019-08-29 15:37
閱讀 2857·2019-08-29 13:45
閱讀 2771·2019-08-26 13:57
