Vue工程模板檔案 webpack打包

1、github

2、webpack配置

（1）基礎配置webpack.base.config.js

const path = require('path');

//處理共用、通用的js
const webpack = require('webpack');
//css單獨打包
const extracttextplugin = require('extract-text-webpack-plugin');
module.exports =,
output: ,
module: ),
css: extracttextplugin.extract()}}
}]},
//iview資料夾下的js編譯處理
,            
//js編譯處理
,            
//css處理
)            },
//less處理
)            },
//處理
,            
//實現資源復用]},
resolve: 
}};

（2）開發環境配置webpack.dev.config.js

//

處理共用、通用的js
const webpack = require('webpack');
//處理html模板
const htmlwebpackplugin = require('html-webpack-plugin');
//css單獨打包
const extracttextplugin = require('extract-text-webpack-plugin');
//合併配置
const merge = require('webpack-merge');
const webpackbaseconfig = require('./webpack.base.config.js');
//fs模組用於對系統檔案及目錄進行讀寫操作
const fs = require('fs');
//編譯前用node生成乙個env.js的檔案，用來標明當前是開發（development）還是生產環境（production）
fs.open('./src/config/env.js', 'w', function
(err, fd) );
});module.exports =merge(webpackbaseconfig, ,
plugins: [
//css單獨打包
newextracttextplugin(),
//通用模組編譯
newwebpack.optimize.commonschunkplugin(),
newhtmlwebpackplugin()
]});

（3）線上環境配置webpack.prod.config.js

//

處理共用、通用的js
const webpack = require('webpack');
//處理html模板
const htmlwebpackplugin = require('html-webpack-plugin');
//css單獨打包
const extracttextplugin = require('extract-text-webpack-plugin');
//合併配置
const merge = require('webpack-merge');
const webpackbaseconfig = require('./webpack.base.config.js');
//fs模組用於對系統檔案及目錄進行讀寫操作
const fs = require('fs');
//編譯前用node生成乙個env.js的檔案，用來標明當前是開發（development）還是生產環境（production）
fs.open('./src/config/env.js', 'w', function
(err, fd) );
});module.exports =merge(webpackbaseconfig, ,
plugins: [
newextracttextplugin(),
//通用模組編譯
newwebpack.optimize.commonschunkplugin(),
newwebpack.defineplugin(
}),//js壓縮
newwebpack.optimize.uglifyjsplugin(
}),newhtmlwebpackplugin()
]});

（4）package.json檔案

,

"repository": ,
"author": "aresn",
"license": "mit",
"dependencies": ,
"devdependencies": ,
"bugs": ,
"homepage": ""}

（4）babel配置.babelrc檔案

更多專業前端知識，請上

【猿2048】www.mk2048.com

VSCode新建 vue檔案模板

每次新建.vue檔案，可以利用vscode的snippet在.vue檔案建立後能輕鬆地生成一套模板，偷懶促進技術發展，促進社會進步。能用模板一鍵生成，絕對不去多敲一行 哈哈哈。ctrl shift p開啟控制台，輸入snippets 首選項 配置使用者 片段 接下來輸入vue並選擇，vscode會自...

Vue中，常用檔案的模板

目錄 1.webpack.config.js模板 2.main.js 模板 3.router.js 模板 5.index.html 模板 由於 webpack 是基於node進行構建的，所有，webpack的配置檔案中，任何合法的node 都是支援的 var path require path 在記...

vue檔案快速生成頁面模板

1 選單選擇 2 新建全域性 片段 1 新建 test.vue檔案 2 在編輯器輸入 vue，然後回車，自動生成 例如 import 元件名稱 from 元件路徑 export default data 監聽屬性 類似於data概念 computed 監控data中的資料變化 watch 方法集合 ...