使用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語句
如果在項目中js語句后面不加分號可以這樣配置："semi": 0，當時webstorm有警告提醒：Unterminated statement，這是可以修改webstorm配置，如下圖：，如果必須加則是：'semi':['error','always']
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<xxx@qq.com>", "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.配置需要babel編譯的目錄和文件
在運行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文件
1. 打包目錄
配置打包目錄，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 }
這里注意，並不是所有的webpack都是這個位置，這個字段。在使用create-react-app創建的項目中，是配置config/paths.js文件。關鍵代碼如下：
module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resolveApp('build'), appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), appNodeModules: resolveApp('node_modules'), publicUrl: getPublicUrl(resolveApp('package.json')), servedPath: getServedPath(resolveApp('package.json')), };
需要把appBuild這個字段配置成你想打包的路徑，注意也可以配置成絕對路徑的，例如：appBuild: 'D:\\JAVA\\app\\resource\\static'
2. 啟動自動打開默認瀏覽器
最近我個更新了node，npm和vue-cli，npm run dev之后發現沒有自動啟動瀏覽器，和autoOpenBrowser這個配置有關，如下：
autoOpenBrowser: false //不自動打開瀏覽器，相反設置為true的時候自動打開瀏覽器。
3. 啟動的端口地址
npm run dev的時候可以通過port屬性指定端口8080
4. 接口調試地址和端口
路由代理是通過插件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 // } }
5. DNS緩存問題
說以個額外的問題，有時候需要修改host文件來做路由跳轉，但是有個問題，host文件是有緩存的，這個時候這里代理就會出報錯：Error occurred while trying to proxy request ... 。這時可以在cmd命令里使用ipconfig/flushdns 來清除dns緩存，執行結果如下：
6. 端口占用問題
有時候啟動多個項目的時候，或者其他程序啟動會占用這里指定的端口，npm run dev的時候會報錯：listen EADDRINUSE :::8082，這時可以運行命令：netstat -ano查看端口對應的PID，如下是16360，然后運行命令：tskill 16360，殺掉這個應用就好了
7.相對路徑問題
有些情況下需要把vue打包后的文件放在某子目錄下，需要修改兩個地方一個是這個config/index.js，修改build下的assetsPublicPath屬性，在斜杠前面加一個“.”，一個是build/utils.js，添加一個配置publicPath: '../../'。截圖如下
這樣打包之后就可以把文件放在服務器任何目錄下。
19.config/prod.env.js文件
不知所雲
20.config/test.env.js文件
不知所雲
21. cross-env設置跨平台設置環境變量