webpack快速入門

1、webpack快速入門webpack 是一個(gè)前端資源的打包工具，它可以將js、image、css等資源當(dāng)成一個(gè)模塊舉行打包。中文官方網(wǎng)站：官網(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。為什么需要打包？將許多碎小文件打包成一個(gè)整體，削減單頁面內(nèi)的衍生哀求次數(shù)，提高網(wǎng)站效率。將es6的高級(jí)語法舉行轉(zhuǎn)換編譯，以兼容老版本的掃瞄器。將代

2、碼打包的同時(shí)舉行混淆，提高代碼的平安性。webpack支持全局安裝和本地安裝，官方推舉是本地安裝，我們根據(jù)正式的來。安裝最新版本webpack，輸入指令：webpack 4+ 版本，你還需要安裝 cli ，輸入指令：此時(shí)，我們注重下項(xiàng)目中文件夾下，會(huì)有一個(gè)package.json文件。（其實(shí)早就有了）打開文件，可以看到我們之前用npm安裝過的文件都會(huì)浮現(xiàn)在這里：學(xué)習(xí)webpack，你需要先理解四個(gè)核心概念：入口(entry)webpack打包的起點(diǎn)，可以有一個(gè)或多個(gè)，普通是js文件。webpack會(huì)從啟點(diǎn)文件開頭，尋覓啟點(diǎn)挺直或間接依靠的其它全部的依靠，包括js、css、資源等，作為未來打包的

3、原始數(shù)據(jù)輸出(output)出口普通包含兩個(gè)屬性：path和filename。用來告知webpack打包的目標(biāo)文件夾，以及文件的名稱。目的地也可以有多個(gè)。加載器（loader）webpack本身只識(shí)別js文件，假如要加載非js文件，必需指定一些額外的加載器（loader），例如css-loader。然后將這些文件轉(zhuǎn)為webpack能處理的有效模塊，最后利用webpack的打包能力去處理。插件(plugins)插件可以擴(kuò)展webpack的功能，讓webpack不僅僅是完成打包，甚至各種更復(fù)雜的功能，或者是對(duì)打包功能舉行優(yōu)化、壓縮，提高效率。接下來，我們編寫一個(gè)webpack的配置，來指定一些打包

4、的配置項(xiàng)。配置文件的名稱，默認(rèn)就是webpack.config.js，我們放到hello-vue的根名目：配置文件中就是要指定上面說的四個(gè)核心概念，入口、出口、加載器、插件。不過，加載器和插件是可選的。我們先編寫入口和出口webpack打包的啟點(diǎn)，可以有一個(gè)或多個(gè)，普通是js文件?，F(xiàn)在思量一下我們有沒有一個(gè)入口？貌似沒有，我們?nèi)康臇|西都集中在index.html，不是一個(gè)js，那怎么辦？我們新建一個(gè)js，把index.html中的部分內(nèi)容舉行集中，然后在index.html中引用這個(gè)js不就ok了！然后把本來index.html中的js代碼所有移動(dòng)到index.js中本來的index.htm

5、l中引入了無數(shù)其它js，在這里我們用法es6的import語法舉行導(dǎo)入。注重，要用法import，就需要在login.js和register.js中添加export導(dǎo)出語句：register.js:vue-router用法模塊化加載后，必需增強(qiáng)一句：vue.use(vuerouter)這樣，index.js就成了我們囫圇配置的入口了。我們?cè)趙ebpack.config.js中添加以下內(nèi)容：出口，就是輸出的目的地。普通我們會(huì)用一個(gè)dist名目，作為打包輸出的文件夾：然后，編寫webpack.config.js，添加出口配置：在控制臺(tái)輸入以下指令：隨后，查看dist名目：嘗試打開build.js，

6、你根本看不懂：全部的js合并為1個(gè)，并且對(duì)變量名舉行了隨機(jī)打亂，這樣就起到了 壓縮、混淆的作用。在index.html中引入剛剛生成的build.js文件，然后運(yùn)行：我們來編寫一段css代碼，對(duì)index的樣式做一些美化：內(nèi)容：前面說過，webpack默認(rèn)只支持js加載。要加載css文件，必需安裝加載器：指令：此時(shí)，在package.json中能看到新安裝的：由于入口在index.js，因此css文件也要在這里引入。依舊用法es6 的模塊語法：在webpack.config.js配置文件中配置css的加載器再次輸入打包命令：效果：(假如之前拜訪過,最好先關(guān)閉掃瞄器)我們每次用法npm安裝，都會(huì)

7、在package.json中留下痕跡，實(shí)際上，package.json中不僅可以記錄安裝的內(nèi)容，還可編寫腳本，讓我們運(yùn)行指令越發(fā)快捷。我們可以把webpack的指令編入其中：以后，假如要打包，就可以挺直輸入：即可。：執(zhí)行npm腳本，后面跟的是配置腳本的名稱之前的打包過程中，除了html文件外的其它文件都被打包了，當(dāng)在線上部署時(shí)，我們還得自己復(fù)制html到dist，然后手動(dòng)添加生成的js到html中，這十分不友好。webpack中的一個(gè)插件：html-webpack-plugin，可以解決這個(gè)問題。1）安裝插件：還需要在webpack.config.js中添加插件：2）將本來html中的引入js

8、代碼刪除：3）再次打包：4）查看dist名目：打開index.html，發(fā)覺已經(jīng)自動(dòng)添加了當(dāng)前名目下的build.js剛才的案例中，每次修改任何js或css內(nèi)容，都必需重新打包，十分棘手。webpack給我們提供了一個(gè)插件，可以幫我們運(yùn)行一個(gè)web服務(wù)，加載頁面內(nèi)容，并且修改js(css,html也可以)后不需要重新加載就能看到最新結(jié)果：1）安裝插件：2）添加啟動(dòng)腳本在package.json中配置script-inline：自動(dòng)刷新-hot：熱加載-port：指定端口-open：自動(dòng)在默認(rèn)掃瞄器打開-host：可以指定服務(wù)器的 ip，不指定則為127.0.0.13）運(yùn)行腳本：4）效果：web

9、pack 是一個(gè)前端資源的打包工具，它可以將js、image、css等資源當(dāng)成一個(gè)模塊舉行打包。中文官方網(wǎng)站：官網(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。為什么需要打包？將許多碎小文件打包成一個(gè)整體，削減單頁面內(nèi)的衍生哀求次數(shù)，提高網(wǎng)站效率。將es6的高級(jí)語法舉行轉(zhuǎn)換編譯，以兼容老版本的掃瞄器。將代碼打包的同時(shí)舉行混淆，提高代

10、碼的平安性。webpack支持全局安裝和本地安裝，官方推舉是本地安裝，我們根據(jù)正式的來。安裝最新版本webpack，輸入指令：webpack 4+ 版本，你還需要安裝 cli ，輸入指令：此時(shí)，我們注重下項(xiàng)目中文件夾下，會(huì)有一個(gè)package.json文件。（其實(shí)早就有了）打開文件，可以看到我們之前用npm安裝過的文件都會(huì)浮現(xiàn)在這里：學(xué)習(xí)webpack，你需要先理解四個(gè)核心概念：入口(entry)webpack打包的起點(diǎn)，可以有一個(gè)或多個(gè)，普通是js文件。webpack會(huì)從啟點(diǎn)文件開頭，尋覓啟點(diǎn)挺直或間接依靠的其它全部的依靠，包括js、css、資源等，作為未來打包的原始數(shù)據(jù)輸出(output)

11、出口普通包含兩個(gè)屬性：path和filename。用來告知webpack打包的目標(biāo)文件夾，以及文件的名稱。目的地也可以有多個(gè)。加載器（loader）webpack本身只識(shí)別js文件，假如要加載非js文件，必需指定一些額外的加載器（loader），例如css-loader。然后將這些文件轉(zhuǎn)為webpack能處理的有效模塊，最后利用webpack的打包能力去處理。插件(plugins)插件可以擴(kuò)展webpack的功能，讓webpack不僅僅是完成打包，甚至各種更復(fù)雜的功能，或者是對(duì)打包功能舉行優(yōu)化、壓縮，提高效率。接下來，我們編寫一個(gè)webpack的配置，來指定一些打包的配置項(xiàng)。配置文件的名稱，默

12、認(rèn)就是webpack.config.js，我們放到hello-vue的根名目：配置文件中就是要指定上面說的四個(gè)核心概念，入口、出口、加載器、插件。不過，加載器和插件是可選的。我們先編寫入口和出口webpack打包的啟點(diǎn)，可以有一個(gè)或多個(gè)，普通是js文件?，F(xiàn)在思量一下我們有沒有一個(gè)入口？貌似沒有，我們?nèi)康臇|西都集中在index.html，不是一個(gè)js，那怎么辦？我們新建一個(gè)js，把index.html中的部分內(nèi)容舉行集中，然后在index.html中引用這個(gè)js不就ok了！然后把本來index.html中的js代碼所有移動(dòng)到index.js中本來的index.html中引入了無數(shù)其它js，在這

13、里我們用法es6的import語法舉行導(dǎo)入。注重，要用法import，就需要在login.js和register.js中添加export導(dǎo)出語句：register.js:vue-router用法模塊化加載后，必需增強(qiáng)一句：vue.use(vuerouter)這樣，index.js就成了我們囫圇配置的入口了。我們?cè)趙ebpack.config.js中添加以下內(nèi)容：出口，就是輸出的目的地。普通我們會(huì)用一個(gè)dist名目，作為打包輸出的文件夾：然后，編寫webpack.config.js，添加出口配置：在控制臺(tái)輸入以下指令：隨后，查看dist名目：嘗試打開build.js，你根本看不懂：全部的js合并

14、為1個(gè)，并且對(duì)變量名舉行了隨機(jī)打亂，這樣就起到了 壓縮、混淆的作用。在index.html中引入剛剛生成的build.js文件，然后運(yùn)行：我們來編寫一段css代碼，對(duì)index的樣式做一些美化：內(nèi)容：前面說過，webpack默認(rèn)只支持js加載。要加載css文件，必需安裝加載器：指令：此時(shí)，在package.json中能看到新安裝的：由于入口在index.js，因此css文件也要在這里引入。依舊用法es6 的模塊語法：在webpack.config.js配置文件中配置css的加載器再次輸入打包命令：效果：(假如之前拜訪過,最好先關(guān)閉掃瞄器)我們每次用法npm安裝，都會(huì)在package.json中

15、留下痕跡，實(shí)際上，package.json中不僅可以記錄安裝的內(nèi)容，還可編寫腳本，讓我們運(yùn)行指令越發(fā)快捷。我們可以把webpack的指令編入其中：以后，假如要打包，就可以挺直輸入：即可。：執(zhí)行npm腳本，后面跟的是配置腳本的名稱之前的打包過程中，除了html文件外的其它文件都被打包了，當(dāng)在線上部署時(shí)，我們還得自己復(fù)制html到dist，然后手動(dòng)添加生成的js到html中，這十分不友好。webpack中的一個(gè)插件：html-webpack-plugin，可以解決這個(gè)問題。1）安裝插件：還需要在webpack.config.js中添加插件：2）將本來html中的引入js代碼刪除：3）再次打包：4）查看dist名目：打開index.html，發(fā)覺已經(jīng)自動(dòng)添加了當(dāng)前名目下的build.js剛才的案例中，每次修改任何