專案搭建文件(每步程式碼配置帶有詳細註釋)
線上展示:http://118.24.144.217/
專案地址:github.com/Jasonccj/vu…
部落格地址:juejin.im/post/5c26e9…
慕課地址:www.imooc.com/learn/935
1.vue+webpack專案工程配置
由於本程式碼是採用webpack3.10.0. 與webpack4.x有很多差異性,夥伴們不要因為版本問題而停滯不前
具體版本可以在package.json中檢視,具體細節都有超詳細註釋,歡迎小夥伴們提出寶貴的意見,一起交流,讓我們一起提高我們的前端技能
1.1 專案基本配置
npm init 初始化一個npm專案
npm i webpack@3.10.0 vue@2.5.13 vue-loader@13.6.0 安裝webpack和vue,使用vue要安裝vue-loader
npm i css-loader@0.28.7 vue-template-compiler@2.5.13 根據終端WARN提示安裝css-loader,因為vue-loader依賴css-loader
//針對各版本做了詳細指定,由於更新過快,避免版本差異性問題,故指定了版本
在app.vue中書寫基本的vue結構
首先在webpack.config.js設定入口entry
宣告我們的入口檔案index.js
示例中app.vue實際是一個元件,元件是不能直接掛載到我們的html中去,需要在index.js中掛載
webpack.config.js同樣設定出口檔案bundle.js及存放路徑
配置完後,在webpack.config.js中配置build指令碼, --config 指定我們的config檔案 因為在這裡面寫,當你呼叫時才會呼叫這個專案裡面的webpack,否則將會呼叫全域性的webpack,全域性webpack和專案中的版本可能存在差異,建議使用這種方式會好一點
1.2 各種靜態資源的載入
webpack對其他型別的檔案處理,可在配置檔案中配置rules規則.
同樣根據配置中的處理的loader都要安裝.
npm i style-loader@0.19.1 url-loader@0.6.2 file-loader@1.1.6
stylus的css前處理器 npm i stylus-loader@3.0.1 stylus@0.54.5
同理其他的像sass,less等其他的前處理器都可以類似的方法去使用
1.3 webpack-dev-server的配置
npm i webpack-dev-server@2.9.1
webpack-dev-server在開發環境中會給我們帶來與webpack不一樣的效果,用的都是同一個配置檔案
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js"
複製程式碼同一個配置檔案,那麼其中必然會根據一個環境變數判斷,來判斷是開發環境還是正式環境
NODE_ENV就是這個環境變數,在linux下 直接NODE_ENV=production,在windows環境下 需要set NODE_ENV=production,解決這種跨平臺設定的差異性,我們可以安裝cross-env@5.1.3
npm i cross-env@5.1.3
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
複製程式碼在webpack.config.js配置好我們的測試環境後,我們還需要引入一個html-webpack-plugin,用於將我們打包好後的js融入到我們的HTml中去
npm i html-webpack-plugin@2.30.1
完成webpack.config.js中後,你便可以使用npm run dev見證奇蹟的時刻了
專案實戰
npm i post i postcss-loader@2.0.9 autoprefixer@7.2.3 babel-loader@7.1.2 babel-core@6.26.0
新建postcss和babel的配置檔案 並配置這兩個檔案
專案業務
詳見原始碼
配置css單獨分離打包及其他一些測試和生產環境的區別
安裝extract-text-webpack-plugin
npm i extract-text-webpack-plugin@3.0.2
打包類庫程式碼及hash優化
配置部分截圖展示(僅用於展示,每步程式碼配置帶有詳細註釋)
小計
最後
- 喜歡的記得點個star.鼓勵一下,謝謝!
- 微信 cuixianseni
- qq群號 424072183