資訊專欄INFORMATION COLUMN
摘要：或許有人會覺得現在項目里面還沒有目錄和文件，程序無法順利輸出。實際上，屬性中定義的路徑如果沒有的話，會自動創建的打開文件添加一句有使用過腳手架的都知道這句話，這里添加的這個指令，就是我們在終端輸入之后幫我們干的一些事情。
我們先來用 npm init 來初始化項目
因為我們用到了vue以及webpack，所以我們需要將這兩個依賴包安裝一下，除了這些呢，還有段落標題中的vue-loader，這個就是為了用webpack加載.vue文件，并將它編譯成瀏覽器能認識的js文件
安裝vue-loader的同時需要再安裝
然后新建一個src文件夾 用來存放源文件，再新建app.vue模板文件
app.vue代碼
如何讓瀏覽器識別vue文件呢？那就需要webpack了
配置webpack我們工程總得有個入口文件，讓瀏覽器去訪問，讓webpack去打包并輸出。現在就來配置webpack的入口和出口。
在src目錄下新建一個main.js的文件作文工程的入口文件。
代碼內容：
配置完入口后就要配置出口了。我們新建一個webpack.config.js，在里面里配上entry入口和out出口，表示webpack文件會將將entry路徑下的文件，打包到out的路徑
以上就是做了這樣一件事，將src下的main.js文件以js的形式打包到dist目錄下的bundle.js中去。或許有人會覺得現在項目里面還沒有dist目錄和bundle.js文件，程序無法順利輸出。實際上，out屬性中定義的路徑如果沒有的話，webpack會自動創建的
打開package.json文件添加一句:
webpack --config webpack.config.js
有使用過腳手架的都知道npm run build 這句話，這里添加的這個指令，就是我們在終端輸入npm run build之后webpack幫我們干的一些事情。而webpack --config webpack.config.js這句的意思就是webpack去幫我們執行我們新建的webpack.config.js文件
現在先試一下執行npm run build，然后接著輸入yes就好了
安裝后我們再npm run build一次，就會出現已報錯
這個錯誤是告訴我們，需要為app.vue這個文件聲明一個loader，因為webpack只支持js類型的文件，像這種vue文件是不支持的，所以我們要使用一些工具，來幫助它認識超出它理解范疇的語法。這個時候就需要Module了
Module在webpack.config.js里添加module配置項
好添加完成之后，再次執行 npm run build 指令。
好的又報錯了，這是要我們安裝vue-template-compiler依賴
輸入指令npm i vue-template-compiler
同時我們還要安裝依賴style-loader來解析css
npm i style-loader
webpack并沒有處理css的能力，所以我們還需要在moudle添加rules配置項，如下
配置后我們再次執行 npm run build 指令。這一次終于成功了
webpack配置項目加載各種靜態資源及css預處理器 1. 靜態資源在上面，我們接觸了css樣式加載
接下來我們要配置加載圖片了。我們加載圖片用到的loader叫‘url-loader’,它的作用是將我們的圖片轉換成一個base64的字串存放于我們打包生成的js里面，而不是重新生成一個文件。對于一些小的文件，幾kb的文件可以幫助我們減少過多的http請求。那么url-loader其實封裝了我們的file-loader，file-loader其實是將文件進行處理后換個名字存放于另一個地方。那么我們先看下配置：
我們這里同樣使用的use屬性，不同的是數組里面使用的對象，因為我們對圖片還需要進行一些更細化的配置，像圖片的大小(limit)，文件名稱(name)有時都是需要進行配置的，所以這里使用了對象。當然，我們需要把使用到的loader安裝一下。
npm i url-loader file-loader
接下來我們新建一個assets目錄，然后放幾張圖片進去，并同時新建一個css目錄新建一個test樣式
css代碼：
并且將我們項目的入口文件添加幾行代碼：
我們現在執行一下npm run build 指令，可以看到webpack將圖片打包成base64字串存放于js中，并且重新生成了新的文件
打開bundle.js
圖片被編譯成了base64字串
在這里我們用stylus處理器，安裝命令。注意記得安裝stylus-loader
npm i stylus-loader stylus
新建一個stylus文件
然后將這個styl文件在入口文件中引用進來
接著我們就可以編譯一下，繼續執行npm run build 指令編譯
我們之前寫的font-size成功編譯在bundle.js里面了
webpack配置webpack-dev-server這個包是咱們在開發環境用的包處理工具，我們這里先install這個包。
npm i webpack-dev-server
然后再package.json配置
"dev": "webpack-dev-server --config webpack.config.js"
添加完dev指令后需要到webpack.config.js下修改一部分內容來專門適應我們的開發環境。接下來我們需要區分全局的一個環境，很容易就想到需設置一個全局的環境變量來做區分控制，我們在build指令后面添加代碼
注：我們如果不想區分不同系統，寫一套代碼來適應多個系統，需要安裝cross-env模塊，并使用他
這里完成之后我們就可以在webpack.config.js文件里面進行判斷了。
webpack.config.js文件里面進行判斷了
overlay屬性是在我們編譯的過程中能夠讓任何的錯誤都顯示到網頁上面。最后我們加完了這些基礎的配置之后回過頭來發現，我們好像配置的只是js、css、img文件，沒有html頁面去容納它們。這個時候我們用到一個webpack的一個插件html-webpack-plugin,我們照樣來安裝一下它：npm i html-webpack-plugin
這里我們用到了webpack，所以需要將 webpack 這個變量引用進來。
到這里我們基本的配置就完成了，最后需要了解一下webpack.DefinePlugin，我們在代碼中的plugin里添加：
說到這里，理論上我們已經完成的本地開發環境的編譯
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104008.html
摘要：后來經過排查你會發現是由于目前還沒有版本。可以使用該方式解決。這就是我為什么不推薦你使用創建腳手架的原因此文的受眾是想要進階中級的初級前端人員。 最近在知乎看到一個問題，原問題如下： 很奇怪，為什么現在能找到自己手動創建vue腳手架的文章非常少，而且大家似乎對webpack4的熱情并不高，對于想基于vue2.0+webpack4搭建一個腳手架的我來說資料真是少得可憐。難道現在一般的做...
摘要：查看安裝是否正常回車后看到輸出當前安裝的版本號，例如，即安裝正常通過以上步聚，說明已經安裝完并能正常運行。再次用腳手架搭建項目第二步將模塊安裝完成后，就可以使用以下命令創建項目了。 前言 世間萬難 無非一拖二懶三不讀書 對 說的就是我 突然覺得這句話說的很對，自從上次寫完nodejs安裝及npm全局模塊路徑的設置已經過去兩月有余，而我的vue框架學習也就止步于此。還是沒有給自己施加壓力...
摘要：那該怎么管理這兩個不同的項目呢解決子模塊用的的同學肯定一下子就想到子模塊的知識了。最后，也希望有想法的同學還有大佬多多留言，給點建議原文地址從零開始做前端架構腳手架參考資料官方文檔使用定制前端腳手架別人寫的腳手架文件操作相關文檔子模塊 前言 相信很多人都用過vue-cli或create-react-app或者類似的腳手架。腳手架方便我們復制，粘貼，或者clone代碼庫，而且還可以更具用...
摘要：提前申明注意自己對腳手架的理解和認識，很多東西和理解都是形象上的手法，并不專業和官方一種項目構建工具，可以將和壓縮成一個文件。之后使用項目名進入項目根目錄，使用來自動安裝項目依賴。 提前申明 注意：自己對vue腳手架的理解和認識，很多東西和理解都是形象上的手法，并不專業和官方 webpack 一種項目構建工具，可以將css和js壓縮成一個文件。此外，可以提供測試用服務器。使用webpa...
摘要：下面來就來講講腳手架的安裝吧。如何安裝安裝只需要在終端下輸入下面一條命令自帶不需要安裝安裝完成后使用即可。原因是的問題，要求版本是。想用安裝，就必須用安裝一下。 前言 Vue作為前端三大框架（Angular，React，Vue）之一，號稱是最簡單，最容易上手的框架，同時也是行內的大趨勢，還可以用來開發最火的小程序。具有開發快，雙向數據流等特點，有些人認為Vue是Angular和Reac...
摘要：下面來就來講講腳手架的安裝吧。如何安裝安裝只需要在終端下輸入下面一條命令自帶不需要安裝安裝完成后使用即可。原因是的問題，要求版本是。想用安裝，就必須用安裝一下。 前言 Vue作為前端三大框架（Angular，React，Vue）之一，號稱是最簡單，最容易上手的框架，同時也是行內的大趨勢，還可以用來開發最火的小程序。具有開發快，雙向數據流等特點，有些人認為Vue是Angular和Reac...
閱讀 3054·2023-04-26 00:40
閱讀 2391·2021-09-27 13:47
閱讀 4197·2021-09-07 10:22
閱讀 2966·2021-09-06 15:02
閱讀 3307·2021-09-04 16:45
閱讀 2484·2021-08-11 10:23
閱讀 3599·2021-07-26 23:38
閱讀 2900·2019-08-30 15:54
