vue的webpack懶加載
阿新 • • 發佈:2018-03-07
name 使用 既然 public alt 端口號 基本 加載 日誌
一個完整的項目離不開 開發環境 生產環境 測試環境 這三個環境
首先解釋一下這三個環境的含義
開發環境:開發環境是程序猿們專門用於開發的服務器,配置可以比較隨意,為了開發調試方便,一般打開全部錯誤報告。
測試環境:一般是克隆一份生產環境的配置,一個程序在測試環境工作不正常,那麽肯定不能把它發布到生產環境上。
生產環境:是指正式提供對外服務的,一般會關掉錯誤報告,打開錯誤日誌。
其次介紹一下webpack打包vue項目
1.安裝好npm,這個不再復述,然後在一個目錄下執行 npm init,這樣就會初始化一個項目包,裏面就有了一個package.json的文件,這個文件想必大家都有所了解 2.然後安裝一下webpack,既然我們想打包,就要把webpack這個工具安裝好,安裝方式有兩種,一個是全局安裝一個是安裝在項目中,在項目的package.json目錄下執行的命令分別是npm install -g webpack 和 npm install --save-dev webpack,在這裏我們安裝在項目裏面,使用第二種安裝方式 3.安裝完成之後我們能看到項目目錄下有一個node_module的文件夾,然後我們就可以寫自己的項目了,我們首先建立一個app和public的文件夾,在app中新建兩個文件,分別是test.js和main.js,在pulic中新建一個index.html文件,這樣我們的基本項目雛形就產生了 4.我們在index.html中寫入一下片段: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Project</title> </head> <body> <div id=‘root‘> </div> <script src="bundle.js"></script> </body> </html> 5.我們在test.js中寫入這樣一個除了方法: //test.js module.exports = function() { var test= document.createElement(‘div‘); test.textContent = "Hi there and testing!"; return test; }; 6.我們在main.js中把test.js的方法導入進來: //main.js var test= require(‘./test.js‘); document.getElementById(‘root‘).appendChild(test()); 7.下面我們就可以使用webpack工具進行打包了,在項目的根目錄,也就是包含node_module的目錄下執行下面這個命令node_modules/.bin/webpack app/main.js public/bundle.js,這條命令的是使用webpack把打包後的文件命名為bundle.js放在public文件夾下,其中app/main,js是項目的入口。我們能看到終端上會打印出包含這樣的log 8.這就說明我們的打包工作完成了,然後我們打開index.html文件就能看到我們輸入的內容:Hi there and testing! 9.這樣要配置項目入口,又要配置輸出文件名之類的東西,在命令行輸入比較麻煩,我們可以使用文件配置的方式,在項目的根目錄中新建一個webpack.congfig.js的文件,把下面這些內容寫入進去 module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/public",//打包後的文件存放的地方 filename: "bundle.js"//打包後輸出文件的文件名 } } 這樣我們就可以直接使用node_modules/.bin/webpack直接進行打包操作了 10.如果我們不想使用node_modules/.bin/webpack這樣的命令,習慣使用npm xxx之類的,我們在我們的package.json中設置一下啟動命令即可: "scripts": { "webpack": "webpack" //配置的地方就是這裏啦 } 然後我們直接執行npm run webpack同樣可以執行打包任務 11.接下來我們介紹,如何直接引入json類型的文件,這裏我們使用loaders模塊,先說一下應用場景吧。我們現在有一個json文件,我們想把它導入到模塊中,然後讀取裏面的信息,下面我們的文件目錄是這樣的: 12.如果我們想在任意一個模塊,如test.js或者main.js中導入這個json文件,比如,我們的test.json文件中有這樣一個內容 //test.json { "Test": "Hi there and geetings from JSON!" } 我們想在test.js使用這樣Test字段 var test = require(‘./test.json‘); module.exports = function() { var geet = document.createElement(‘div‘); geet.textContent = test.greetText; return geet; }; 我們就要引入json-loader,具體的辦法是:在根目錄下執行 //安裝可以裝換JSON的loader npm install --save-dev json-loader 然後把我們的webpack.config.js配置成下面這樣 module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, module: {//在配置文件裏添加JSON loader loaders: [ { test: /\.json$/, use: "json-loader" } ] } } 最後我們執行一下npm run webpack,打包完成,打開index.html頁面就會顯示test.json裏面的Hi there and geetings from JSON!這個內容 13.如果我們想把css樣式也一起打包,就npm install --save-dev style-loader css-loader,然後在webpack.config.js進行相應的配置就行了,這樣是把js和css打包成一個文件,也可以把他們分開打包,這樣後面再介紹吧
最後介紹一下我們的項目目錄
如果分環境打包需要配置以下幾個文件
細說一下每個文件做了什麽
定義域名和端口號
做判斷該走哪個環境
三個環境的定義
配置接口定義
配置打包命令
vue的webpack懶加載