1.下載vue-cli
?
[html]?view plain
?copy npm?install?vue-cli?-g??
vue-cli的使用與詳細介紹，可以到github上獲取https://github.com/vuejs/vue-cli
?
?
2.安裝webpack項目模版
[html]?view plain
?copy vue?init?<template-name>?<project-name>?? 比如：
[html]?view plain
?copy vue?init?webpack?my-project?? 之后可以在當前目錄下下載該模版，然后
[html]?view plain
?copy npm?install?? 安裝所有的依賴包，可以得到如下的目錄結構
3.目錄結構與文件配置說明
首先對目錄結構進行說明， 1.build目錄，主要利用webpack與node插件啟動一些相關服務的js文件 2.config目錄主要是針對開發環境，生產環境，測試環境的配置信息 3.src是我們自己開發時的源碼目錄（可指定修改名稱） 4.static是一些第三方庫的包用到的靜態資源目錄（可指定修改名稱） 說明每個文件： 主要入口文件，dev-server.js文件，幾乎每一句話都進行了注釋，有些地方，涉及了其他關聯文件，下面也會有相應的注釋的方式
[html]?view plain
?copy //?引入檢查版本js模塊??require('./check-versions')()??//?引入配置文件信息模塊??var?config?=?require('../config')??//?判斷開發環境??if?(!process.env.NODE_ENV)?process.env.NODE_ENV?=?JSON.parse(config.dev.env.NODE_ENV)??//?引入nodejs的path模塊，進行一些路徑的操作，詳情可以查看node官方的api??var?path?=?require('path')??//?引入nodejs的一個框架express,可以幫助我們快速搭建一個node服務?github?https://github.com/expressjs/express??var?express?=?require('express')??//?引入node為webpack提供的一個模塊服務?github?https://github.com/webpack/webpack??var?webpack?=?require('webpack')??//?可以指定打開指定的url使用指定的瀏覽器或者應用，詳情可以去看一下github?https://github.com/sindresorhus/opn??var?opn?=?require('opn')??//?一個可以設置幫助我們進行服務器轉發代理的中間件?https://github.com/chimurai/http-proxy-middleware??var?proxyMiddleware?=?require('http-proxy-middleware')??//?根據當前啟動環境選擇加載相應的配置文件，webpack.prod.conf與webpack.dev.conf文件的說明后面也有??var?webpackConfig?=?process.env.NODE_ENV?===?'testing'??????require('./webpack.prod.conf')????:?require('./webpack.dev.conf')????//?端口號的設置??var?port?=?process.env.PORT?||?config.dev.port??//?獲取需要代理的服務api??//?https://github.com/chimurai/http-proxy-middleware??var?proxyTable?=?config.dev.proxyTable??//?啟動一個express服務??var?app?=?express()??//?加載webpack配置??var?compiler?=?webpack(webpackConfig)??//?webpack的開發中間件，專門為webpack提供的一個簡單的中間件，可以讓文件都加載內存中，不去讀寫硬盤，并且當文件被改動的時候，不會刷新頁面就會部署成功??var?devMiddleware?=?require('webpack-dev-middleware')(compiler,?{????publicPath:?webpackConfig.output.publicPath,????quiet:?true??})??//?一個為webpack提供的熱部署中間件。https://github.com/glenjamin/webpack-hot-middleware??var?hotMiddleware?=?require('webpack-hot-middleware')(compiler,?{????log:?()?=>?{}??})??//?當html被改變的時候，讓html被強制部署，使用這個中間件html-webpack-plugin，https://github.com/ampedandwired/html-webpack-plugin??compiler.plugin('compilation',?function?(compilation)?{????compilation.plugin('html-webpack-plugin-after-emit',?function?(data,?cb)?{??????hotMiddleware.publish({?action:?'reload'?})??????cb()????})??})????//?遍歷代理的配置信息,并且使用中間件加載進去??Object.keys(proxyTable).forEach(function?(context)?{????var?options?=?proxyTable[context]????if?(typeof?options?===?'string')?{??????options?=?{?target:?options?}????}????app.use(proxyMiddleware(context,?options))??})????//?當訪問找不到的頁面的時候，該中間件指定了一個默認的頁面返回https://github.com/bripkens/connect-history-api-fallback??app.use(require('connect-history-api-fallback')())????//?使用中間件??app.use(devMiddleware)????//?熱部署??app.use(hotMiddleware)????//?根據配置信息拼接一個目錄路徑，然后將該路徑下的文件交給express的靜態目錄管理??var?staticPath?=?path.posix.join(config.dev.assetsPublicPath,?config.dev.assetsSubDirectory)??app.use(staticPath,?express.static('./static'))????var?uri?=?'http://localhost:'?+?port????devMiddleware.waitUntilValid(function?()?{????console.log('>?Listening?at?'?+?uri?+?'\n')??})??//?導出的對象??module.exports?=?app.listen(port,?function?(err)?{????if?(err)?{??????console.log(err)??????return????}??????//?when?env?is?testing,?don't?need?open?it????if?(process.env.NODE_ENV?!==?'testing')?{??????opn(uri)????}??})?? webpack.base.conf.js
[html]?view plain
?copy var?path?=?require('path')??var?config?=?require('../config')??//?工具類，下面會用到??var?utils?=?require('./utils')??//?工程目錄，就是當前目錄build的上一層目錄??var?projectRoot?=?path.resolve(__dirname,?'../')????var?env?=?process.env.NODE_ENV??//?是否在開發環境中使用cssSourceMap,默認是false,該配置信息在config目錄下的index.js中可以查看??var?cssSourceMapDev?=?(env?===?'development'?&&?config.dev.cssSourceMap)??var?cssSourceMapProd?=?(env?===?'production'?&&?config.build.productionSourceMap)??var?useCssSourceMap?=?cssSourceMapDev?||?cssSourceMapProd??//?導出的對象，就是webpack的配置項，詳情可以參考的webpack的配置說明，這里會將出現的都一一說明一下??module.exports?=?{????//?指明入口函數????entry:?{??????app:?'./src/main.js'????},????//?輸出配置項????output:?{??????//?路徑，從config/index讀取的，值為：工程目錄下的dist目錄，需要的自定義的也可以去修改??????path:?config.build.assetsRoot,??????//?發布路徑，這里是的值為/，正式生產環境可能是服務器上的一個路徑,也可以自定義??????publicPath:?process.env.NODE_ENV?===?'production'???config.build.assetsPublicPath?:?config.dev.assetsPublicPath,??????filename:?'[name].js'????},????//?配置模塊如何被解析，就是import或者require的一些配置????resolve:?{??????//?當使用require或者import的時候，自動補全下面的擴展名文件的擴展名，也就是說引入的時候不需要使用擴展名??????extensions:?['',?'.js',?'.vue',?'.json'],??????//?當我們require的東西找不到的時候，可以去node_modules里面去找，??????fallback:?[path.join(__dirname,?'../node_modules')],??????//?別名,在我們require的時候，可以使用這些別名，來縮短我們需要的路徑的長度??????alias:?{????????'vue$':?'vue/dist/vue.common.js',????????'src':?path.resolve(__dirname,?'../src'),????????'assets':?path.resolve(__dirname,?'../src/assets'),????????'components':?path.resolve(__dirname,?'../src/components')??????}????},????//?同上????resolveLoader:?{??????fallback:?[path.join(__dirname,?'../node_modules')]????},????//?對相應文件的編譯使用什么工具的配置????module:?{??????//?loader之前的配置，會對.vue,.js的文件用eslint進行編譯,include是包含的文件，exclude是排除的文件，可以使用的正則??????preLoaders:?[????????{??????????test:?/\.vue$/,??????????loader:?'eslint',??????????include:?[????????????path.join(projectRoot,?'src')??????????],??????????exclude:?/node_modules/????????},????????{??????????test:?/\.js$/,??????????loader:?'eslint',??????????include:?[????????????path.join(projectRoot,?'src')??????????],??????????exclude:?/node_modules/????????}??????],??????//?這里也是相應的配置，test就是匹配文件，loader是加載器，??????//?query比較特殊，當大小超過10kb的時候，會單獨生成一個文件，文件名的生成規則是utils提供的方法，當小于10kb的時候，就會生成一個base64串放入js文件中??????loaders:?[????????{??????????test:?/\.vue$/,??????????loader:?'vue'????????},????????{??????????test:?/\.js$/,??????????loader:?'babel',??????????include:?[????????????path.join(projectRoot,?'src')??????????],??????????exclude:?/node_modules/????????},????????{??????????test:?/\.json$/,??????????loader:?'json'????????},????????{??????????test:?/\.(png|jpe?g|gif|svg)(\?.*)?$/,??????????loader:?'url',??????????query:?{????????????limit:?10000,????????????name:?utils.assetsPath('img/[name].[hash:7].[ext]')??????????}????????},????????{??????????test:?/\.(woff2?|eot|ttf|otf)(\?.*)?$/,??????????loader:?'url',??????????query:?{????????????limit:?10000,????????????name:?utils.assetsPath('fonts/[name].[hash:7].[ext]')??????????}????????}??????]????},????//?eslint的配置????eslint:?{??????formatter:?require('eslint-friendly-formatter')????},????//?vue-loader的配置????vue:?{??????loaders:?utils.cssLoaders({?sourceMap:?useCssSourceMap?}),??????postcss:?[????????require('autoprefixer')({??????????browsers:?['last?2?versions']????????})??????]????}??}?? webpack.dev.comf.js
[html]?view plain
?copy var?config?=?require('../config')??var?webpack?=?require('webpack')??//?https://github.com/survivejs/webpack-merge?提供一個合并生成新對象函數??var?merge?=?require('webpack-merge')??var?utils?=?require('./utils')??var?baseWebpackConfig?=?require('./webpack.base.conf')??var?HtmlWebpackPlugin?=?require('html-webpack-plugin')??var?FriendlyErrors?=?require('friendly-errors-webpack-plugin')????//?在瀏覽器不刷新的情況下，也可以看到改變的效果，如果刷新失敗了，他就會自動刷新頁面??Object.keys(baseWebpackConfig.entry).forEach(function?(name)?{????baseWebpackConfig.entry[name]?=?['./build/dev-client'].concat(baseWebpackConfig.entry[name])??})????module.exports?=?merge(baseWebpackConfig,?{????module:?{??????//?后面會有對utils的解釋,這里是對單獨的css文件，用相應的css加載器來解析??????loaders:?utils.styleLoaders({?sourceMap:?config.dev.cssSourceMap?})????},????//?在開發模式下，可以在webpack下面找到js文件，在f12的時候，????devtool:?'#eval-source-map',????//?將webpack的插件放入????plugins:?[??????//?通過插件修改定義的變量??????new?webpack.DefinePlugin({????????'process.env':?config.dev.env??????}),??????//?webpack優化的這個一個模塊，https://github.com/glenjamin/webpack-hot-middleware#installation--usage??????new?webpack.optimize.OccurrenceOrderPlugin(),??????//?熱加載??????new?webpack.HotModuleReplacementPlugin(),??????//?當編譯出現錯誤的時候，會跳過這部分代碼??????new?webpack.NoErrorsPlugin(),??????//?filename生成的文件名，template是模版用的文件名,https://github.com/ampedandwired/html-webpack-plugin??????new?HtmlWebpackPlugin({????????filename:?'index.html',????????template:?'index.html',????????//?讓打包生成的html文件中css和js就默認添加到html里面，css就添加到head里面，js就添加到body里面????????inject:?true??????}),??????new?FriendlyErrors()????]??})?? utils.js和config目錄下面的js文件都比較好辨認是干什么的，config下面都是配置信息，json對象，很好理解，utils下面就是導出了幾個常用的方法，主要也就是用在了上述的幾個js文件里面，另外關于生產階段和測試階段的js說明，后面會有文章說明 補充：
?項目中配置的config/index.js，有dev和production兩種環境的配置 以下介紹的是production環境下的webpack配置的理解
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 }
轉載于:https://www.cnblogs.com/leolovexx/p/7992929.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的vue-cli的webpack模版，相关配置文件dev-server.js与webpack.config.js配置解析的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
