Vue 2.x + Webpack 4.x的那些事---萌新必备
大家好，本人名叫蘇日儷格，現(xiàn)在很多的項目都使用了webpack，現(xiàn)在最火的也就是vue和webpack結(jié)合來完善一個項目，由于介入了一個有幾年歷史的產(chǎn)品，第一步不得不看看webpack的配置項，看看項目中的哪些部分被模塊化了，因為想要更多的理解webpack，查找了一些資料看了很多教程和API，測試了一個沒有使用vue腳手架的項目（ps:強烈建議新手務必遠離vue-cli，這東西是給有很多年開發(fā)經(jīng)驗的老手來提高開發(fā)效率的，并不適合學習），下面我會把我對webpack的理解跟大家分享一下，本文純屬個人理解，有哪里不對的地方請在評論區(qū)指出，大家一起學習共同進步。
聽到webpack這個詞，就會有很多人也包括我都會想到gulp，認為二者都是自動化構(gòu)建工具；其實不是這樣的，在這里我先介紹二者的異同：
- gulp：是一種自動化構(gòu)建工具，能夠提升我們的開發(fā)效率，也能提升瀏覽器運行速度，譬如它能壓縮js/css等文件的代碼，還能編譯less/sass，能完成頁面的自動刷新等功能
- webpack：是一種模塊化管理方案/模塊打包工具，在他的眼里就是萬物皆模塊，可以用loader(加載器/轉(zhuǎn)換器)把任何一個文件資源打包成瀏覽器認識的JavaScript模塊，還可以將按需加載的模塊進行異步加載
webpack特點
- Webpack?有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點，形成一個新的塊。在優(yōu)化了依賴樹后，每一個異步區(qū)塊都作為一個文件被打包。
- Webpack 本身只能處理原生的?JavaScript?模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript?模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
- Webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS?文件。甚至在加載依賴的時候，允許使用動態(tài)表達式 require(“./templates/” + name + “.jade”)。
- Webpack 還有一個功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個插件系統(tǒng)運行的，還可以開發(fā)和使用開源的 Webpack?插件，來滿足各式各樣的需求。
- Webpack 使用異步 I/O 和多級緩存提高運行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。
在這里不得不說一下：
webpack、gulp和grunt都是在nodeJs的環(huán)境下運行的，而在中大型項目或產(chǎn)品中，nodeJs一般用做中間層，做數(shù)據(jù)處理和轉(zhuǎn)發(fā)，然后再由底層語言進行底層開發(fā)，比如我們公司的產(chǎn)品就是這種架構(gòu)，C++作為底層系統(tǒng)的開發(fā)；
看了上面的內(nèi)容，我們雖然知道了它在項目中用到的好處，可是我們沒有見過，沒有真憑實據(jù)，可以參考一下這個項目的demo(https://segmentfault.com/a/1190000012848772)，一步一步讓你的項目越來越快；那么webpack具體怎么用的呢？下面就來逐步介紹一下，為了大家能學到，我這里新建一個項目做示范：
一、安裝vue和webpack
先輸入npm i vue安裝上vue
vue-loader就是我們webpack需要讀取vue文件并加載成它所認識的js，之后細心的人就會發(fā)現(xiàn)package.json里多了一個devDependencies對象，這就是我們要的開發(fā)環(huán)境的依賴包
npm i style-loader css-loader url-loader file-loader vue-template-compiler -D
還用webpack得安裝上webpack-cli：
npm i webpack-cli -D
以上四步安裝完是這個效果：
二、配置webpack并打包項目
app.vue文件:
<template><div id="app"></div> </template><script type="text/javascript"> export default {} </script><style> </style>index.js文件:
import Vue from 'vue'; import App from './app.vue';import './assets/style/test.css';var vm = new Vue({el: '#app',render: (h) => h(App) // 通過創(chuàng)建DOM元素返回參數(shù)h將App掛載，h即為hyperscript，用來實現(xiàn)虛擬DOM的 });webpack.config.js文件：
const Path = require('path'); // 從node上導入path const VueLoaderPlugin = require('vue-loader/lib/plugin'); // webpack 4版本之后加的，之前的版本不需要這個let config = {entry: Path.resolve(__dirname, './src/index.js'), // 以join拼接path的形式配置絕對路徑,相對路徑打包后找不到會報錯output: {filename: 'vendor.build.js',path: Path.join(__dirname, 'dist')},module: {rules: [{test: /\.vue$/,loader: 'vue-loader'}, {test: /\.css$/,use: ['style-loader','css-loader']}, {test: /\.(png|jpg|jpeg|gif)$/,use: {loader: 'url-loader',options: {limit: 1024, // 判斷圖片的大小 如果小于1024就會轉(zhuǎn)換成base64name: '[name].[ext]' // 輸出圖片的名字 ext是擴展名}}}]},plugins: [new VueLoaderPlugin()] };module.exports = config;上面配置好了之后還差最后一步，就是用webpack來執(zhí)行配置跑項目，在scripts里面加上build：
"build": "webpack --config webpack.config.js"這個時候會看到我們的項目中多了個dist，就是我們打包好的項目，這一步就省去了我們很多的http請求，達到更優(yōu)化的效果。
在打包這一過程中，如果出現(xiàn)了打包失敗，檢查完問題后再次打包，如果顯示的是打包失敗，那么請刪了之前打的包，重新build就會好了
三、運行項目
我們會看到有兩個webpack.config.js，但是我們現(xiàn)在安裝的是我們開發(fā)環(huán)境需要用到的，接下來增加一些開發(fā)模式需要用到的webpack的配置，這些配置我會逐步分析：
個人習慣：喜歡運行start，所以把run dev替換掉了："start": "npm run dev"
效果如下：
首先用一個變量代表是開發(fā)環(huán)境：const isDev = process.env.NODE_ENV === 'development';在package.json scripts里面設置的生產(chǎn)和開發(fā)環(huán)境的環(huán)境變量都存在于cross-dev，我們設置腳本的時候啟動的環(huán)境變量全都存在于process.env里面，這樣我們在之后可以隨意調(diào)用它
然后在最下面給module.exports賦值之前，加個判斷：
if (isDev) {config.devServer = {port: 8088, // webpack服務需要監(jiān)聽的端口號host: '0.0.0.0', // 可以通過本機內(nèi)網(wǎng)ip訪問,這樣別人也可以訪問,手機也可訪問,如果設置成localhost則不然overlay: {errors: true // 這個可有可無,webpack編譯出現(xiàn)的錯誤會出現(xiàn)在網(wǎng)頁中,便于更改}}; }上述代碼中的配置項我們在webpack官網(wǎng)中都可以看得到，每一步的原因我已在后面加了相關注釋。
用法和之前的一樣，所有的插件都是需要引入并創(chuàng)建實例這一過程；下面根據(jù)之前配置好的環(huán)境變量在webpack編譯的過程中，對寫的js代碼都會判斷環(huán)境，根據(jù)不同環(huán)境對代碼進行打包(我們只想要"development",所以外面會加上單引號)，代碼如下：
new Webpack.DefinePlugin({'process-env': {NODE_ENV: isDev ? '"development"' : '"production"'}})webpack有個支持熱加載功能的插件HotModuleReplacementPlugin，再通過vue-loader讀取vue的組件，在devServer里面配置一個hot: true，就形成了熱加載；
還一個是映射工具devtool，使用source-map做映射，將我們壓縮文件中的代碼映射回源文件中的原始位置的方法，更輕松調(diào)試，谷歌和火狐都已經(jīng)支持，文件大效率低，導致webpack編譯慢，而eval解析出來的會很亂，二合一是webpack提出來的有效的方法；
在CLI下的devServer下還有一個compress是用在所有服務端gzip 壓縮，這個在Yahoo雅虎軍規(guī)上有提到；
更多的好用的插件就去webpack官網(wǎng)了解吧
如果是自己建的html的小伙伴就可以在html-webpack-plugin里面配置它，之后再把帶有id是app的div放進html里面，在app.vue里面渲染的dom就會生成在html中：
用完了這個webpack我感覺棒極了，以后項目必備品！
參考???：
https://blog.csdn.net/c_kite/article/details/71279853
https://juejin.im/post/5acd890d6fb9a028d043ca15
https://juejin.im/post/5abef5e96fb9a028e33b9035
webpack官網(wǎng)
**如果喜歡本文的話單擊愛心加關注謝謝O(∩_∩)O~**
本文的所有內(nèi)容均是一字一句敲上去的，希望大家閱讀完本文可以有所收獲，因為能力有限，掌握的知識也是不夠全面，歡迎大家提出來一起分享！謝謝O(∩_∩)O~
歡迎來我的GitHub，喜歡的可以star，項目隨意fork，支持轉(zhuǎn)載但要下標注，同時恭候：我的簡書 Resume
等一下( ?? .? ?? )，我還有最后一句話：
我愛你，
可我們總是用最惡毒的話去傷害最愛的人，
然后再用最深的懺悔去挽回，
感情就在這樣的循環(huán)里撕扯和消磨，
慢慢變的無跡可尋了，
我們就這樣在嘶吼里告別，
就像那些美好從未發(fā)生，
一切都會消失的，
感情也是，
一切都是需要守護的，
感情尤其是，
再見...
轉(zhuǎn)載于:https://www.cnblogs.com/yufy/p/9494338.html
總結(jié)
以上是生活随笔為你收集整理的Vue 2.x + Webpack 4.x的那些事---萌新必备的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle-RAC安装随笔
- 下一篇： [NOI2016]循环之美(杜教筛)