Webapck+Vue多頁面商城模板

Vue官方提供了Vue-Cli腳手架，集成了Webpack的環境，上手開發和構建很是方便。但Vue-cli適用於單頁應用，而日常作的項目中每每都是多頁的，網上看了不少Webpack多頁面的配置，中間遇到不少坑，本身看文檔，對着作出了這個多頁面的商城模板。

項目模板效果:

項目開源在Github,歡迎star。github地址

在線預覽:github.czero.cn/store/index…

項目描述

靜態頁面是用的阿里團隊的rem和flex彈性佈局。

商城的數據是用axios請求本地的JSON文件，再用Vue進行渲染。

項目放在github,樂於交流，歡迎star

webpack文檔

https://doc.webpack-china.org/guides/

webpack.config.js

const path = require("path");
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin'); /*每次編譯以前，先刪除之編譯好的文件夾*/
const ExtractTextPlugin = require("extract-text-webpack-plugin"); /*提取css到爲單獨文件*/
const HtmlWebpackPlugin = require('html-webpack-plugin'); /*生成html*/
const CopyWebpackPlugin = require('copy-webpack-plugin'); /*複製文件*/
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); /*精簡輸出*/
module.exports = {
	entry: {
		rem: './js/rem.js',		/*動態計算rem*/
		swiper: './js/swiper.js', /*輪播插件*/
		index: './js/index.js', /*首頁*/
		detail: './js/detail.js', /*詳情頁*/
		category: './js/category.js', /*分類*/
		cart: './js/cart.js', /*購物車*/
		member: './js/member.js', /*會員頁面*/
		address: './js/address.js', /*地址列表頁面*/
		addaddress: './js/addaddress.js', /*添加地址*/
		datacity :'./js/datacity.js', /*三級聯動地址數據*/
		order: './js/order.js' /*訂單*/
	},
	devtool: 'inline-source-map',   //開啓調試模式
	output: {
		path: path.resolve(__dirname, "./build"),
		filename: "./js/[name].[chunkhash:8].js",    //輸出的文件加入hash值
	},
	module: {
		loaders: [{
				test: /(\.jsx|\.js)$/,
				use: {
					loader: "babel-loader",
					options: {
						presets: [
							"es2015"
						]
					}
				},
				exclude: /node_modules/
			},
			
			{
				test: /(\.less|\.css)$/,
				use: ExtractTextPlugin.extract({
					fallback: "style-loader",
					use: "css-loader!less-loader!postcss-loader",
				})

			},
			 {
			 	//提取html裏面的img文件
		        test: /\.(htm|html)$/i,
		        loader: 'html-withimg-loader',
		   },
			   {
			   	//圖片打包
			   	test:/(\.jpg|\.png|\.gif|\.jpeg)$/, 
			   	use:{
			   		loader:'file-loader',
			   		 options: {
			   		 	outputPath: 'icon',
			   		 	name:'[name].[ext]',		   		 	
				      	useRelativePath:true
				    }
			   	}
			   },			 
		]
	},
	plugins: [
		new webpack.BannerPlugin('凡幾全部，翻版必究'),
		new ExtractTextPlugin('./css/[name].[chunkhash:8].css'),
//		new UglifyJSPlugin(),
		 代碼壓縮
		new webpack.optimize.UglifyJsPlugin({
			compress: {
				warnings: false
			}
		}),
		// html文件輸出
		new HtmlWebpackPlugin({
			title: '首頁',
			filename: 'index.html',
			template: './index.html',			
			chunks: ['rem','index','swiper'],
			hash:true,
			cach:true,
			minify:{
				caseSensitive:false, //是否大小寫敏感
				removeComments:true, //去除註釋
				removeEmptyAttributes:true,//去除空屬性
				collapseWhitespace:true //是否去除空格
			},
			inject:'body'
		}),	
		new HtmlWebpackPlugin({
			title:'分類',
			filename: './pages/category.html',
			template: './pages/category.html',			
			chunks: ['rem','category']
		}),	
		new HtmlWebpackPlugin({
			title:'購物車',
			filename: 'pages/cart.html',
			template: 'pages/cart.html',			
			chunks: ['rem','cart']
		}),	
		new HtmlWebpackPlugin({
			title:'我的中心',
			filename: 'pages/member.html',
			template: 'pages/member.html',			
			chunks: ['rem','member']
		}),	
		new HtmlWebpackPlugin({
			title:'商品詳情',
			filename: 'pages/detail.html',
			template: 'pages/detail.html',			
			chunks: ['rem','detail']
		}),	
		new HtmlWebpackPlugin({
			title:'地址列表',
			filename: 'pages/address.html',
			template: 'pages/address.html',
			chunks: ['rem','address']
		}),
		new HtmlWebpackPlugin({
			title:'添加地址',
			filename: 'pages/addaddress.html',
			template: 'pages/addaddress.html',			
			chunks: ['rem','addaddress','datacity']
		}),
		new HtmlWebpackPlugin({
			title:'訂單詳情',
			filename: 'pages/order.html',
			template: 'pages/order.html',			
			chunks: ['rem','order']
		}),
		new CopyWebpackPlugin([{
		    from: __dirname + '/data',
		    to:'data/'
		}]),
		
		 new CommonsChunkPlugin({
		       name:"rem",
		  }),
		new CleanWebpackPlugin(['build']) //編譯前先清除文件夾
	],

	// 全局引用jquery
	externals: {
		jquery: 'window.$',
	},
	//構建本地服務器的相關配置 須要在`package.json`裏面激活
	devServer: {
		contentBase:'./build',
		historyApiFallback: true, //不跳轉
		inline: true,//實時刷新,
	},

}
複製代碼

配置loader：

babel-loader:將es6輸出轉化爲es5
less-loader:將less轉化爲css
html-withimg-loader:提取html裏面的img文件到編譯完成後的文件夾當中
file-loader:將圖片進行轉化成base64
複製代碼

配置插件plugin:

webpack.BannerPlugin:會在你編譯生成後的js添加註釋
ExtractTextPlugin:將css文件提取出來，單獨引用到html文件中
UglifyJSPlugin:每次編譯都壓縮一下代碼，減小生成的文件體積
HtmlWebpackPlugin:指定模板，打包後會自動將入口的js引用到頁面
CommonsChunkPlugin:將公用的js文件提取出來
CleanWebpackPlugin:每次編譯以前都會先清除掉以前的打包文件
複製代碼

externals

配置全局jquery
複製代碼

devServer:

安裝devserver能夠構建本地服務器，每次修改和保存都會自動的刷新頁面
複製代碼

postcss.config.js

配置postcss主要是爲了解決css樣式在有些瀏覽器兼容的緣由，會自動給你添加後綴
複製代碼