vue+webpack搭建單檔案應用和多檔案應用webpack.con

1.前言

這幾天，都遇到過有人問過相似的問題，就是用vue和webpack搭建目錄的時候，怎麼把單頁面應用的配置改成多檔案應用，或者是怎麼把多檔案應用的配置改成單檔案應用。這個情況，我之前有處理過，公司的同事教過我，我就針對這個情況寫下此篇文章。各位如果覺得我哪裡寫得不夠好，寫錯了，歡迎指出，大家一起進步。

2.說明

1. 首先，我用的vue和webpack的版本都是2.x的，請大家留意自己使用的版本，特別是webpack的版本，1和2還是有些區別的。

2. 然後，專案搭建的流程我不多說了，之前寫過文章，網上也有很多好文章值得學習。接下來我只針對webpack.config.js這個配置檔案說明，因為我做專案的時候，改動的基本就是這裡，專案的檔案雖然也有寫法上的改動，但是那個改動相信不會難到大家，如果真的不知如何下手，我往後可能會再寫文章。

3.單檔案應用的配置

由於現在單檔案應用寫得比較多，一開始我就先放單檔案應用的配置檔案吧，程式碼如下

let path = require('path'); let webpack = require('webpack'); /*  html-webpack-plugin外掛，webpack中生成HTML的外掛，  具體可以去這裡檢視  */ let HtmlWebpackPlugin = require('html-webpack-plugin'); /*  一個根據模式匹配獲取檔案列表的node模組。  有關glob的詳細用法可以在這裡看到——  */ let glob = require('glob'); /*  webpack外掛  */ let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; let publicPath = '/dist/'; //IP地址 let serverHost = getIPAdress(); let config = {     //入口檔案     entry: {         index: path.resolve(__dirname, 'src/js/page/index.js'),         vendors: ['vue', 'vue-router','vue-resource','vuex','element-ui','element-ui/lib/theme-default/index.css'] // 需要進行單獨打包的檔案     },     //出口檔案     output: {         path: path.join(__dirname, 'dist'), //輸出目錄的配置，模板、樣式、指令碼、圖片等資源的路徑配置都相對於它         publicPath: publicPath,                //模板、樣式、指令碼、圖片等資源對應的server上的路徑         filename: 'js/[name].js',            //每個頁面對應的主js的生成配置         // chunkFilename: 'js/[name].asyncChunk.js?[chunkhash]'   //chunk生成的配置         chunkFilename: 'js/[name].asyncChunk.js?'+new Date().getTime() //chunk生成的配置     },     module: {         //載入器         rules: [             {                 test: /.vue$/,                 loader: 'vue-loader',                 options: {                     loaders: {                         scss: 'vue-style-loader!css-loader!sass-loader', // 

4.多檔案應用的配置

多檔案現在用的不算很多，主要有時候會負責公司一些活動的小專案會用到，程式碼如下。

let path = require('path'); let webpack = require('webpack'); /*  html-webpack-plugin外掛，webpack中生成HTML的外掛，  具體可以去這裡檢視  */ let HtmlWebpackPlugin = require('html-webpack-plugin'); /*  一個根據模式匹配獲取檔案列表的node模組。  有關glob的詳細用法可以在這裡看到——  */ let glob = require('glob'); /*  webpack外掛  */ let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; let publicPath = '/dist/'; //透過getEntry函式獲取所有js指令碼 let jsEntries = getEntry('./src/js/page/*.js'); //IP地址 let IPAddress = getIPAdress(); let serverHost = IPAddress; let config = {     //入口檔案     entry: jsEntries,     // entry: {     //     index:jsEntries,     //     vendors: ['vue', 'vue-router','vue-resource'] // 需要進行單獨打包的檔案     // },     //出口檔案     output: {         path: path.join(__dirname, 'dist'), //輸出目錄的配置，模板、樣式、指令碼、圖片等資源的路徑配置都相對於它         publicPath: publicPath,                //模板、樣式、指令碼、圖片等資源對應的server上的路徑         filename: 'js/[name].js',            //每個頁面對應的主js的生成配置         chunkFilename: 'js/[id].chunk.js?[chunkhash]'   //chunk生成的配置     },     module: {         rules: [             {                 test: /.vue$/,                 loader: 'vue-loader',                 options: {                     loaders: {                         scss: 'vue-style-loader!css-loader!sass-loader', // 

5.區別總結

一對比，區別就是出來了，但是寫法是大同小異的。有區別是主要是下面幾點

1.入口檔案的區別，單頁面應用入口檔案是就是一個index.js（'src/js/page/index.js'）。而多頁面應用的入口檔案是所有需要用到的頁面let jsEntries = getEntry('./src/js/page/*.js');。（getEntry方法是返回一個目錄下所有的.js檔案的名稱和路徑，jsEntries就是一個物件陣列，裡面包含著./src/js/page目錄下所有的.js檔案的名稱和路徑）

2.在多檔案應用的配置中，HtmlWebpackPlugin這個外掛是提取出來，在遍歷getEntry('./src/html/*.html')的過程中，執行一次就往配置(config.plugins)那裡push一次（config.plugins.push(new HtmlWebpackPlugin(conf))）。為什麼這樣寫，大家應該很清楚了，有多少個入口檔案，就得寫多少次這個外掛，new HtmlWebpackPlugin多少次，如果入口檔案只有一兩個，兩三個還好，如果有100個入口檔案，豈不是要在config.plugins那裡寫100次new HtmlWebpackPlugin，所以就標題文字遍歷了，方便點。

結語

好了。單檔案應用和多檔案應用上，webpack.config.js是大同小異的，區別就討論到這裡了。如果文章覺得那裡寫得不好或者寫錯了，歡迎指出。同時也希望，這篇文章能幫到大家！