vue-cli的webpack模版，相關配置文件dev-server.js與webpack.config.js配置解析

時間  2019-11-11
標籤 vue cli webpack 模版 相關 配置文件 dev server.js server webpack.config.js config 配置 解析 欄目 JavaScript 简体版
原文   原文鏈接

1.下載vue-cli

 

[html]  view plain  copy
 
  1. npm install vue-cli -g  


vue-cli的使用與詳細介紹，能夠到github上獲取https://github.com/vuejs/vue-clicss

 

 

2.安裝webpack項目模版

[html]  view plain  copy
 
  1. vue init <template-name> <project-name>  
好比：
[html]  view plain  copy
 
  1. vue init webpack my-project  
 
以後能夠在當前目錄下下載該模版，而後
[html]  view plain  copy
 
  1. npm install  

安裝全部的依賴包，能夠獲得以下的目錄結構
 

3.目錄結構與文件配置說明

首先對目錄結構進行說明，
1.build目錄，主要利用webpack與node插件啓動一些相關服務的js文件
2.config目錄主要是針對開發環境，生產環境，測試環境的配置信息
3.src是咱們本身開發時的源碼目錄（可指定修更名稱）
4.static是一些第三方庫的包用到的靜態資源目錄（可指定修更名稱）
 
說明每一個文件：
主要入口文件，dev-server.js文件，幾乎每一句話都進行了註釋，有些地方，涉及了其餘關聯文件，下面也會有相應的註釋的方式
[html]  view plain  copy
 
  1. // 引入檢查版本js模塊  
  2. require('./check-versions')()  
  3. // 引入配置文件信息模塊  
  4. var config = require('../config')  
  5. // 判斷開發環境  
  6. if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)  
  7. // 引入nodejs的path模塊，進行一些路徑的操做，詳情能夠查看node官方的api  
  8. var path = require('path')  
  9. // 引入nodejs的一個框架express,能夠幫助咱們快速搭建一個node服務 github https://github.com/expressjs/express  
  10. var express = require('express')  
  11. // 引入node爲webpack提供的一個模塊服務 github https://github.com/webpack/webpack  
  12. var webpack = require('webpack')  
  13. // 能夠指定打開指定的url使用指定的瀏覽器或者應用，詳情能夠去看一下github https://github.com/sindresorhus/opn  
  14. var opn = require('opn')  
  15. // 一個能夠設置幫助咱們進行服務器轉發代理的中間件 https://github.com/chimurai/http-proxy-middleware  
  16. var proxyMiddleware = require('http-proxy-middleware')  
  17. // 根據當前啓動環境選擇加載相應的配置文件，webpack.prod.conf與webpack.dev.conf文件的說明後面也有  
  18. var webpackConfig = process.env.NODE_ENV === 'testing'  
  19.   ? require('./webpack.prod.conf')  
  20.   : require('./webpack.dev.conf')  
  21.   
  22. // 端口號的設置  
  23. var port = process.env.PORT || config.dev.port  
  24. // 獲取須要代理的服務api  
  25. // https://github.com/chimurai/http-proxy-middleware  
  26. var proxyTable = config.dev.proxyTable  
  27. // 啓動一個express服務  
  28. var app = express()  
  29. // 加載webpack配置  
  30. var compiler = webpack(webpackConfig)  
  31. // webpack的開發中間件，專門爲webpack提供的一個簡單的中間件，可讓文件都加載內存中，不去讀寫硬盤，而且當文件被改動的時候，不會刷新頁面就會部署成功  
  32. var devMiddleware = require('webpack-dev-middleware')(compiler, {  
  33.   publicPath: webpackConfig.output.publicPath,  
  34.   quiet: true  
  35. })  
  36. // 一個爲webpack提供的熱部署中間件。https://github.com/glenjamin/webpack-hot-middleware  
  37. var hotMiddleware = require('webpack-hot-middleware')(compiler, {  
  38.   log: () => {}  
  39. })  
  40. // 當html被改變的時候，讓html被強制部署，使用這個中間件html-webpack-plugin，https://github.com/ampedandwired/html-webpack-plugin  
  41. compiler.plugin('compilation', function (compilation) {  
  42.   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {  
  43.     hotMiddleware.publish({ action: 'reload' })  
  44.     cb()  
  45.   })  
  46. })  
  47.   
  48. // 遍歷代理的配置信息,而且使用中間件加載進去  
  49. Object.keys(proxyTable).forEach(function (context) {  
  50.   var options = proxyTable[context]  
  51.   if (typeof options === 'string') {  
  52.     options = { target: options }  
  53.   }  
  54.   app.use(proxyMiddleware(context, options))  
  55. })  
  56.   
  57. // 當訪問找不到的頁面的時候，該中間件指定了一個默認的頁面返回https://github.com/bripkens/connect-history-api-fallback  
  58. app.use(require('connect-history-api-fallback')())  
  59.   
  60. // 使用中間件  
  61. app.use(devMiddleware)  
  62.   
  63. // 熱部署  
  64. app.use(hotMiddleware)  
  65.   
  66. // 根據配置信息拼接一個目錄路徑，而後將該路徑下的文件交給express的靜態目錄管理  
  67. var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)  
  68. app.use(staticPath, express.static('./static'))  
  69.   
  70. var uri = 'http://localhost:' + port  
  71.   
  72. devMiddleware.waitUntilValid(function () {  
  73.   console.log('> Listening at ' + uri + '\n')  
  74. })  
  75. // 導出的對象  
  76. module.exports = app.listen(port, function (err) {  
  77.   if (err) {  
  78.     console.log(err)  
  79.     return  
  80.   }  
  81.   
  82.   // when env is testing, don't need open it  
  83.   if (process.env.NODE_ENV !== 'testing') {  
  84.     opn(uri)  
  85.   }  
  86. })  
 
webpack.base.conf.js
[html]  view plain  copy
 
  1. var path = require('path')  
  2. var config = require('../config')  
  3. // 工具類，下面會用到  
  4. var utils = require('./utils')  
  5. // 工程目錄，就是當前目錄build的上一層目錄  
  6. var projectRoot = path.resolve(__dirname, '../')  
  7.   
  8. var env = process.env.NODE_ENV  
  9. // 是否在開發環境中使用cssSourceMap,默認是false,該配置信息在config目錄下的index.js中能夠查看  
  10. var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)  
  11. var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)  
  12. var useCssSourceMap = cssSourceMapDev || cssSourceMapProd  
  13. // 導出的對象，就是webpack的配置項，詳情能夠參考的webpack的配置說明，這裏會將出現的都一一說明一下  
  14. module.exports = {  
  15.   // 指明入口函數  
  16.   entry: {  
  17.     app: './src/main.js'  
  18.   },  
  19.   // 輸出配置項  
  20.   output: {  
  21.     // 路徑，從config/index讀取的，值爲：工程目錄下的dist目錄，須要的自定義的也能夠去修改  
  22.     path: config.build.assetsRoot,  
  23.     // 發佈路徑，這裏是的值爲/，正式生產環境多是服務器上的一個路徑,也能夠自定義  
  24.     publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,  
  25.     filename: '[name].js'  
  26.   },  
  27.   // 配置模塊如何被解析，就是import或者require的一些配置  
  28.   resolve: {  
  29.     // 當使用require或者import的時候，自動補全下面的擴展名文件的擴展名，也就是說引入的時候不須要使用擴展名  
  30.     extensions: ['', '.js', '.vue', '.json'],  
  31.     // 當咱們require的東西找不到的時候，能夠去node_modules裏面去找，  
  32.     fallback: [path.join(__dirname, '../node_modules')],  
  33.     // 別名,在咱們require的時候，可使用這些別名，來縮短咱們須要的路徑的長度  
  34.     alias: {  
  35.       'vue$': 'vue/dist/vue.common.js',  
  36.       'src': path.resolve(__dirname, '../src'),  
  37.       'assets': path.resolve(__dirname, '../src/assets'),  
  38.       'components': path.resolve(__dirname, '../src/components')  
  39.     }  
  40.   },  
  41.   // 同上  
  42.   resolveLoader: {  
  43.     fallback: [path.join(__dirname, '../node_modules')]  
  44.   },  
  45.   // 對相應文件的編譯使用什麼工具的配置  
  46.   module: {  
  47.     // loader以前的配置，會對.vue,.js的文件用eslint進行編譯,include是包含的文件，exclude是排除的文件，可使用的正則  
  48.     preLoaders: [  
  49.       {  
  50.         test: /\.vue$/,  
  51.         loader: 'eslint',  
  52.         include: [  
  53.           path.join(projectRoot, 'src')  
  54.         ],  
  55.         exclude: /node_modules/  
  56.       },  
  57.       {  
  58.         test: /\.js$/,  
  59.         loader: 'eslint',  
  60.         include: [  
  61.           path.join(projectRoot, 'src')  
  62.         ],  
  63.         exclude: /node_modules/  
  64.       }  
  65.     ],  
  66.     // 這裏也是相應的配置，test就是匹配文件，loader是加載器，  
  67.     // query比較特殊，當大小超過10kb的時候，會單獨生成一個文件，文件名的生成規則是utils提供的方法，當小於10kb的時候，就會生成一個base64串放入js文件中  
  68.     loaders: [  
  69.       {  
  70.         test: /\.vue$/,  
  71.         loader: 'vue'  
  72.       },  
  73.       {  
  74.         test: /\.js$/,  
  75.         loader: 'babel',  
  76.         include: [  
  77.           path.join(projectRoot, 'src')  
  78.         ],  
  79.         exclude: /node_modules/  
  80.       },  
  81.       {  
  82.         test: /\.json$/,  
  83.         loader: 'json'  
  84.       },  
  85.       {  
  86.         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  
  87.         loader: 'url',  
  88.         query: {  
  89.           limit: 10000,  
  90.           name: utils.assetsPath('img/[name].[hash:7].[ext]')  
  91.         }  
  92.       },  
  93.       {  
  94.         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,  
  95.         loader: 'url',  
  96.         query: {  
  97.           limit: 10000,  
  98.           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')  
  99.         }  
  100.       }  
  101.     ]  
  102.   },  
  103.   // eslint的配置  
  104.   eslint: {  
  105.     formatter: require('eslint-friendly-formatter')  
  106.   },  
  107.   // vue-loader的配置  
  108.   vue: {  
  109.     loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),  
  110.     postcss: [  
  111.       require('autoprefixer')({  
  112.         browsers: ['last 2 versions']  
  113.       })  
  114.     ]  
  115.   }  
  116. }  

webpack.dev.comf.js
[html]  view plain  copy
 
  1. var config = require('../config')  
  2. var webpack = require('webpack')  
  3. // https://github.com/survivejs/webpack-merge 提供一個合併生成新對象函數  
  4. var merge = require('webpack-merge')  
  5. var utils = require('./utils')  
  6. var baseWebpackConfig = require('./webpack.base.conf')  
  7. var HtmlWebpackPlugin = require('html-webpack-plugin')  
  8. var FriendlyErrors = require('friendly-errors-webpack-plugin')  
  9.   
  10. // 在瀏覽器不刷新的狀況下，也能夠看到改變的效果，若是刷新失敗了，他就會自動刷新頁面  
  11. Object.keys(baseWebpackConfig.entry).forEach(function (name) {  
  12.   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])  
  13. })  
  14.   
  15. module.exports = merge(baseWebpackConfig, {  
  16.   module: {  
  17.     // 後面會有對utils的解釋,這裏是對單獨的css文件，用相應的css加載器來解析  
  18.     loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })  
  19.   },  
  20.   // 在開發模式下，能夠在webpack下面找到js文件，在f12的時候，  
  21.   devtool: '#eval-source-map',  
  22.   // 將webpack的插件放入  
  23.   plugins: [  
  24.     // 經過插件修改定義的變量  
  25.     new webpack.DefinePlugin({  
  26.       'process.env': config.dev.env  
  27.     }),  
  28.     // webpack優化的這個一個模塊，https://github.com/glenjamin/webpack-hot-middleware#installation--usage  
  29.     new webpack.optimize.OccurrenceOrderPlugin(),  
  30.     // 熱加載  
  31.     new webpack.HotModuleReplacementPlugin(),  
  32.     // 當編譯出現錯誤的時候，會跳過這部分代碼  
  33.     new webpack.NoErrorsPlugin(),  
  34.     // filename生成的文件名，template是模版用的文件名,https://github.com/ampedandwired/html-webpack-plugin  
  35.     new HtmlWebpackPlugin({  
  36.       filename: 'index.html',  
  37.       template: 'index.html',  
  38.       // 讓打包生成的html文件中css和js就默認添加到html裏面，css就添加到head裏面，js就添加到body裏面  
  39.       inject: true  
  40.     }),  
  41.     new FriendlyErrors()  
  42.   ]  
  43. })  

utils.js和config目錄下面的js文件都比較好辨認是幹什麼的，config下面都是配置信息，json對象，很好理解，utils下面就是導出了幾個經常使用的方法，主要也就是用在了上述的幾個js文件裏面，另外關於生產階段和測試階段的js說明，後面會有文章說明
 
補充：

 項目中配置的config/index.js，有dev和production兩種環境的配置 如下介紹的是production環境下的webpack配置的理解html

複製代碼 
 1 var path = require('path')
 2 
 3 module.exports = {
 4   build: { // production 環境
 5     env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環境
 6     index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的 index.html 文件
 7     assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態資源路徑
 8     assetsSubDirectory: 'static', // 編譯輸出的二級目錄
 9     assetsPublicPath: '/', // 編譯發佈的根目錄，可配置爲資源服務器域名或 CDN 域名
10     productionSourceMap: true, // 是否開啓 cssSourceMap
11     // Gzip off by default as many popular static hosts such as
12     // Surge or Netlify already gzip all static assets for you.
13     // Before setting to `true`, make sure to:
14     // npm install --save-dev compression-webpack-plugin
15     productionGzip: false, // 是否開啓 gzip
16     productionGzipExtensions: ['js', 'css'] // 須要使用 gzip 壓縮的文件擴展名
17   },
18   dev: { // dev 環境
19     env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環境
20     port: 8080, // 運行測試頁面的端口
21     assetsSubDirectory: 'static', // 編譯輸出的二級目錄
22     assetsPublicPath: '/', // 編譯發佈的根目錄，可配置爲資源服務器域名或 CDN 域名
23     proxyTable: {}, // 須要 proxyTable 代理的接口（可跨域）
24     // CSS Sourcemaps off by default because relative paths are "buggy"
25     // with this option, according to the CSS-Loader README
26     // (https://github.com/webpack/css-loader#sourcemaps)
27     // In our experience, they generally work as expected,
28     // just be aware of this issue when enabling this option.
29     cssSourceMap: false // 是否開啓 cssSourceMap
30   }
31 }
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程