Webapck+Vue多頁面商城模板

rickchen發表於2017-12-04
WebVue

Vue官方提供了Vue-Cli腳手架，整合了Webpack的環境，上手開發和構建非常方便。但Vue-cli適用於單頁應用，而平常做的專案中往往都是多頁的，網上看了很多Webpack多頁面的配置，中間遇到很多坑，自己看文件，對著做出了這個多頁面的商城模板。

專案模板效果:

Webapck+Vue多頁面商城模板

專案開源在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樣式在有些瀏覽器相容的原因，會自動給你新增字尾
複製程式碼

相關文章