预览地址 ：http://corange.czero.cn/store/index.html
npm install
npm run dev
npm run build
Vue官方提供了Vue-Cli脚手架，集成了Webpack的环境，上手开发和构建非常方便。但Vue-cli适用于单页应用，而平常做的项目中往往都是多页的，网上看了很多Webpack多页面的配置，中间遇到很多坑，自己看文档，对着做出了这个多页面的商城模板。
在线预览:http://corange.czero.cn/store/index.html
静态页面是用的阿里团队的rem和flex弹性布局。
商城的数据是用axios请求本地的JSON文件，再用Vue进行渲染。
项目放在github,乐于交流，欢迎star
https://doc.webpack-china.org/guides/
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,//实时刷新,
},
}
babel-loader:将es6输出转化为es5
less-loader:将less转化为css
html-withimg-loader:提取html里面的img文件到编译完成后的文件夹当中
file-loader:将图片进行转化成base64
webpack.BannerPlugin:会在你编译生成后的js添加注释
ExtractTextPlugin:将css文件提取出来，单独引用到html文件中
UglifyJSPlugin:每次编译都压缩一下代码，减少生成的文件体积
HtmlWebpackPlugin:指定模板，打包后会自动将入口的js引用到页面
CommonsChunkPlugin:将公用的js文件提取出来
CleanWebpackPlugin:每次编译之前都会先清除掉之前的打包文件
配置全局jquery
安装devserver可以构建本地服务器，每次修改和保存都会自动的刷新页面
配置postcss主要是为了解决css样式在有些浏览器兼容的原因，会自动给你添加