使用vue init webpack test(項目檔案夾名)指令初始化一個vue項目，cd test，然後安裝依賴npm install之後會生成一些預設的檔案夾和檔案，這些檔案和檔案夾中有些和配置有關的。如果去專門的了解webpack一定會雲裡霧裡，這裡簡單說明一下常用的配置。
1.babelrc檔案
這個檔案放在根目錄下面設定轉碼規則的。
例如要想在代碼中使用es6，就要在這個檔案中配置"presets": ["es2015"]。
在項目代碼中要使用jsx文法除了安裝
babel-plugin-transform-vue-jsx插件之外，還要配置"plugins": ["transform-runtime", "transform-vue-jsx"]。
2..editorconfig檔案
這個檔案配置編輯器的編碼風格，目前本人還沒有修改過。
3..eslintrc.js檔案
這個檔案放在根目錄下面是負責代碼規範，引入插件的。例如：
"globals": {
"plus": true,
"alert": true,
"xhook": true,
"sessionStorage": true,
"AlloyFingerVue": true,
"FastClick": true,
"_": true,
"IScroll": true,'Swiper': true}, 這一段是用來允許使用第三方插件中的函數，如下舉例
比如我們使用HBuilder打包程式，用到一些擴充，使用plus.downloader.createDownload下載下傳，plus.runtime.version擷取app目前版本等，是以配置"plus": true，然後在在代碼中可以直接使用plus.xxxx。
在項目調試的時候有時候用到alert，是以配置"alert": true，然後在代碼中可以直接使用alert()語句。
使用xhook攔截器，是以配置"xhook": true，在index.html中引入xhook插件<script src="static/js/xhook.min.js"></script>，在src/modules中建立xhoo.js檔案并處理邏輯，然後在main.js中引入這個檔案import './modules/xhook'。
在項目中想直接使用sessionStorage，是以配置"sessionStorage": true。
在項目中想使用AlloyFingerVue，是以配置"AlloyFingerVue": true，在static/js/下添加alloy_finger.vue.js檔案，并導出AlloyFingerVue子產品，然後在main.js中直接使用這個子產品Vue.use(AlloyFingerVue)。
在項目中想使用FastClick，是以配置"FastClick": true，在index.html中引入fastclick插件<script src="static/js/fastclick.js"></script>，在src/modules中建立fast-click.js檔案處理邏輯，在main.js中引入這個檔案import './modules/fast-click'。
在項目中想使用underscore，是以配置"_": true，在static/js中添加underscore-min.js插件<script src="static/js/underscore-min.js"></script>，然後可以在代碼中直接使用_.pluck，_.values等。
在項目中想使用iscroll，是以配置，在index.html中引入iscroll插件<script src="static/js/iscroll-probe.js"></script>，然後可以在代碼中直接使用<iscroll-view></iscroll-view>并使用new IScroll語句。
在項目中想使用Swiper,是以配置，在msite.vue中引入js和css檔案，import './../../../static/swiper/swiper.min.css'，import './../../../static/swiper/swiper.min'，然後可以在代碼中直接使用this.swiper = new Swiper語句
4..eslintignore檔案
想要引入三方js庫，但是這些庫不符合eslint規範，可以在這個檔案裡忽略掉，例如：
build/*.js
config/*.js
static 5..gitignore檔案
這個檔案用于配置不需要加入版本管理的檔案，例如：
.DS_Store
node_modules/
npm-debug.log
test/unit/coverage
test/e2e/reports
selenium-debug.log
.idea
/clear
/src/modules/cache.js 6.package.json檔案
這個檔案主要用來配置項目要用到的依賴插件，這個檔案一般不會手動更改，而是使用npm install xxxx 來安裝插件，然後這個檔案自動被修改。scripts節點配置指令的執行檔案。運作npm run dev執行build/dev-server.js，運作npm run build的時候執行待是build/build.js檔案。如下：
{
"name": "test",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "xxx<[email protected]>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"date-fns": "^1.22.0",
"echarts": "^3.4.0",
"element-ui": "^1.1.2",
......
},
"devDependencies": {
"autoprefixer": "^6.6.1",
"babel-core": "^6.21.0",
"babel-eslint": "^7.1.1",
... ...
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
} 7.build/build.js檔案
執行打包指令的時候會執行這個檔案，然後不知所雲
8.build/check-versions.js檔案
檢查版本？不知所雲
9.build/dev-client.js檔案
不知所雲
10.build/dev-server.js檔案
app.use(staticPath, express.static('./static'))這句是指向static目錄。執行npm run dev的時候最先執行build/dev-server.js檔案，這個檔案主要完成下面幾個事情：
- 檢查node的npm待版本，引入插件和配置
- webpack對源碼進行編譯打包并傳回compiler對象
11.build/utils.js檔案
12.build/vue-loader.conf.js檔案
13.build/webpack.base.conf.js檔案
1.配置項目入口檔案，如下：
entry: {
app: './src/main.js',
global: './src/window-global.js'
} 這樣就有兩個入口，在window-global.js中可以定義全局變量，在整個項目中都可以使用，比如ajaxBaseUrl: 'http://192.168.1.36:8080/'，在後在接口檔案中使用，很友善
var instance = axios.create({
baseURL: window.global.ajaxBaseUrl + 'api/system/subSystem',
timeout: window.global.timeout
// headers: {'X-Custom-Header': 'foobar'}
}) 2.配置項目輸出，如下：
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
} 3.配置快捷通路方式
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'src': resolve('src'),
'api':resolve('src/api'),
'storage':resolve('src/module/storage.js'),
'common':resolve('src/components/common')
}
}, 這樣在頁面中通路api或者storage就不用考慮目前頁面的路徑，例如在src\components\laboratory\chemical\material\apply-dialog.vue這樣一個路徑下導入api，可以直接寫import * as api from 'api' ， 否則要寫成import * as api from './../../../../api' 這樣，要考慮目前的路徑。也有一個缺點，就是不能使用ctrl + 滑鼠左鍵點選快速定位到接口代碼。如下代碼這裡不能快速定位。
4.配置編譯目錄
在運作npm run build的時候要知道babel-loader編譯那些目錄下的js檔案。初始化webpack的時候項目主要的檔案存放在src目錄下面，有時候需要修改這個檔案夾的名字，這個時候需要修改這裡。還有解決element-ui一個bug的時候需要把一個插件中的檔案打包。如下代碼：
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/element-ui/src/mixins/emitter.js')]
} 下面一個項目把src檔案夾名字修改了，另外新加了一個packages的檔案夾，這裡也要改一下，如下：
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('examples'), resolve('test'), resolve('packages')]
}, 還有在我們需要在vue項目中引入markdown檔案也需要引入一個vue-markdown-loader，，如下：
// 配置markdown-loader by ningdong
{
test: /\.md$/,
loader: "vue-markdown-loader",
options: vueMarkdown
} 注意這裡vue-markdown-loader需要事先安裝。
還有我們項目中如果想使用less檔案，就可以先安裝less和less-loader，然後在這裡添加一個配置項，如下：
npm install less less-loader --save // 配置less-loader
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
} 14.build/webpack.dev.conf.js檔案
配置devtool選項更改打包方式。
15.build/webpack.prod.conf.js檔案
（1）打包的時候報錯：FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory，說記憶體不夠，可以修改打包配置，就是npm run build生成靜态檔案時候用到的配置，減少記憶體消耗。
修改sourceMap配置成false可以在打包後不再生成map檔案，如下：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: false
}) dist/static/js目錄下沒有map檔案了
（2）還可以修改node_modules\.bin\webpack.cmd檔案添加記憶體配置項
16.build/webpack.test.conf.js檔案
不知所雲。
17.config/dev.env.js檔案
18.config/index.js檔案
配置打包目錄，index檔案，打包後的js檔案路徑等，如下，打包後的檔案放在dist目錄下面，入口檔案是index.html
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
} 最近我個更新了node，npm和vue-cli，npm run dev之後發現沒有自動啟動浏覽器，和autoOpenBrowser這個配置有關，如下：
autoOpenBrowser: false //不自動打開浏覽器，相反設定為true的時候自動打開浏覽器。npm run dev的時候可以通過port屬性指定端口8080
路由代理是通過插件http-proxy-middleware實作的，配置開環境下的調試端口，接口位址等，如下：
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
/* 張三 */
// '/jiKonCloud_1': {
// target: 'http://192.168.1.60:8080',
// changeOrigin: true
// },
/* 李四 */
// '/api': {
// target: 'http://192.168.1.9:8080',
// changeOrigin: true
// }
// '/api': {
// target: 'http://192.168.1.130:8080',
// changeOrigin: true
// }
/* 王五 */
// '/api': {
// target: 'http://192.168.100.120:8080/',
// changeOrigin: true
// }
/* 趙劉 */
// '/api': {
// target: 'http://192.168.100.176:9595',
// changeOrigin: true
// }
// '/api': {
// target: 'http://192.168.1.121:9595',
// changeOrigin: true
// }
/* 錢七 */
// '/api': {
// target: 'http://192.168.100.33:8080',
// changeOrigin: true
// }
// '/api': {
// target: 'http://192.168.1.107:8080',
// changeOrigin: true
// }
} 有時候啟動多個項目的時候，或者其他程式啟動會占用這裡指定的端口，npm run dev的時候會報錯：listen EADDRINUSE :::8082，這時可以運作指令：netstat -ano檢視端口對應的PID，如下是16360，然後運作指令：tskill 16360，殺掉這個應用就好了
有些情況下需要把vue打包後的檔案放在某子目錄下，需要修改兩個地方一個是這個config/index.js，修改build下的assetsPublicPath屬性，在斜杠前面加一個“.”，一個是build/utils.js，添加一個配置publicPath: '../../'。截圖如下
這樣打包之後就可以把檔案放在伺服器任何目錄下。
19.config/prod.env.js檔案
20.config/test.env.js檔案
作者：
Tyler Ning出處：
http://www.cnblogs.com/tylerdonet/本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，如有問題，可以通過以下郵箱位址
[email protected]聯系我，非常感謝。