為什麼要用webpack

一：為什麼用webpack？

在日常的開發中經常在乙個index.html頁面中引入多個css，js檔案，會導致頁面載入慢，所以有必要將他們合併為乙個檔案，所以使用webpack（其實還有很多如sass lass等第三方中間語言需要編譯後執行，所以頁需要用到webpack編譯打包）;

二：我們經常用乙個叫做main.js的檔案作為js的入口檔案，就是說所以的js檔案都被引入到main.js檔案，編譯好後，index.html再引用編譯好的檔案（通常是bundle.js）；

三：目錄結構，index.html和main.js檔案位於src根目錄下：

四：專案中會用到很多第三方外掛程式，所以npm是必須的，那麼就需要npm初始化...

五：基本上三方外掛程式都會用到jquery，那麼npm i jquery，安裝完後，我們可以在main.js檔案匯入jquery，import $ from jquery，(import from是es6的新語法)；可以嘗試用jquery操作index.html檔案的dom，但是我們在瀏覽器開啟index.html，發現jquery操作無效，原因是瀏覽器不認識import，那麼我們就要用webpack編譯一下，再引用編譯好的bundle.js檔案了；在專案根目錄下執行：

d:\www\2019>webpack src/main.js -o dist/bundle.js

六：以上就是乙個js檔案，由於語法不能識別而編譯後執行的案例，這就是webpack的乙個初探；

七：在開發階段，我們可能不斷的操作dom而使用jquery，不可能每次都去手敲**去編譯，然後在瀏覽器檢視index.html，這樣效率太低了，這時候我們可以在根目錄下新建配置乙個webpack.config.js，由於webpack是基於node的，所以下面配置就是node的語法；

var path = require('path');
module.exports = 
};

七：有了配置檔案，就可以在專案根目錄下執行webpack，對檔案進行編譯了；

八：雖然上面的步驟已經簡化了打包編譯的命令操作，但是還是很不方便，這時候我們可以安裝乙個外掛程式來自動打包編譯（當我們修改**後），安裝這個外掛程式：

npm i webpack-dev-server

九：安裝好後，我們在專案根目錄執行 webpack-dev-server就相當於執行webpack ,但是如果你執行會提示不是命令語句，那是因為我們安裝在專案裡了，而不是安裝在全域性，因此命令無法識別；這時候我們可以配置package.json檔案來解決：

"scripts": ,

十：配置好後，在專案根目錄執行npm run dev 就可以自動編譯了，有時候這裡會報錯，提示沒有找到webpack模組，那是因為還需要在專案裡面安裝webpack；這時候就需要npm i webpack安裝一下，裝好後再執行npm run dev；

十一：執行後編譯成功就會有下面乙個提示，這個鏈結是我們專案的根目錄，這個時候我們打包好的bundle.js檔案被託管到了這個根目錄，這個時候你會發現，index.html引用的dist裡面的bundle.js和根目錄的bundle.js檔案是兩碼事，其實，我們這時候需要引用的是根目錄的bundle.js，因為它是時時編譯的（其實這個檔案是在記憶體當中生成的，所以在根目錄看不到它），因此我們這時候必須修改index.html檔案中的js引用位址，把src屬性修改為「/bundle.js」

project is running at http://localhost:8080/

十二：雖然通過上面的npm run dev打包編譯後在記憶體中生成了上述鏈結，但是還需要我們手動在瀏覽器去執行它，這樣也不方便，這時候我們可以再次配置package.json檔案，--open自動在瀏覽器開啟，順便可以指定埠號3000，但是我們發現開啟的是專案的跟路徑，一般我們都是開啟index.html的路徑，這時候我們加上--contentbase src就直接進入src目錄了

"scripts": ,

十三：--host可以實現瀏覽器的無重新整理(js的修改過載沒有效果，css的修改是有效果的)過載，我們繼續配置：

"scripts": ,

十四：我們可以通過三方外掛程式，讓index.html和bundle.js一樣也生成在記憶體裡面，安裝：

npm i html-webpack-plugin

十五：配置上述外掛程式，在webpack.config.js裡面配置，配置完後執行npm run dev就在記憶體中自動生成了index.html檔案，這個檔案會自動引用bundle.js檔案

const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = ,
plugin:[
new htmlwebpackplugin()]};

十六：將所需要的css樣式檔案全部匯入到main.js，將來統一打包編譯處理：廢話不多說，css檔案需要三方載入器進行處理

載入器如css-loader,style-loader,url-loader；

npm i babel-loader

然後配置webpack.config.js檔案：

//排除node_modules內部的js檔案，也就是只處理我們自己編寫的js檔案

,

如果不排除node_modules資料夾下的檔案，在打包main.js檔案的時候也會將匯入的node_modules資料夾下的檔案打包，這樣打包速度非常慢，即使打包完畢，檔案也不會正常執行的；所以一定要排除node_modules資料夾下的檔案；

十七：配置完後，還需要在醒目根目錄下配置乙個babel的json檔案，所以我們在根目錄新建babelrc.json檔案，用來配置babel的一些相關外掛程式，（當然，如果沒有安裝babel的外掛程式，那就不需要配置該檔案），具體的配置和外掛程式根據自己需要在babel查詢文件，按自己的需要執行npm去安裝，安裝好後在babelrc.json檔案進行配置；

十八：說完了配置，我們就可以開啟vue專案了！

為什麼要用webpack

為什麼要用 enable shared from

為什麼要用補碼

為什麼要用AndroidStudio

為什麼要用webpack

為什麼要用 enable shared from

為什麼要用補碼

為什麼要用AndroidStudio

相關推薦