webpack---webpack构建vue多页面框架（二、webpak.config.js）

const webpack=require('webpack');   //webpack必要条件
const ExtractTextPlugin=require('extract-text-webpack-plugin');    //分离css插件
const HtmlWebpackPlugin=require('html-webpack-plugin');   //多页面生成视图插件
const CleanWebpackPlugin=require('clean-webpack-plugin');   //清除工程目录插件
const ProgressBarPlugin=require('progress-bar-webpack-plugin');   //打包进度条插件
const path=require('path');    //node路径处理模块

module.exports={

//对象形式entry
entry:{
home:resolve('./src/APPpages/home/main.js'),
list:resolve('./src/APPpages/list/main.js'),
about:resolve('./src/APPpages/about/main.js'),
},

output:{
path:resolve('./dist'),   //打包之后工程根目录
publicPath:'../',   //js,css,img等资源对应的server目录
filename:'js/[name].js',   //每个页面对应的js文件
chunkFilename:'js/common/[id].chunk.js'   //按需加载js
}，
resolve:{
alias:{
vue:'vue/dist/vue.js',
common:resolve('./src/APPcommon')   //为公共目录设置别名
}
},

module: {
rules: [
{
test: /\.vue$/,  //.vue文件处理
loader: 'vue-loader',
options: {
transformToRequire: {
video: 'src',
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
},
{
test: /\.html$/,  //html打包，可有可无
loader: 'html-loader?attrs=img:src img:data-src'
},
{
test: /\.js$/,  //es6转es5处理
loader: 'babel-loader',
enforce: 'pre',
include: resolve('src'),
exclude: ['node_modules/'],
query: {
presets: ['latest']
}
},
{
test: /\.scss$/,  //sass预编译解析，并分离css
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','postcss-loader', 'sass-loader']
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','postcss-loader']
})
},
{
test: /\.(png|jpeg|jpg|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 5000,
name: './img/[name].[ext]',  //图片保存到img文件夹
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '/YDW_res/media/[name].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '/YDW_res/fonts/[name].[ext]'
}
}
]
},
plugins: [
new webpack.ProvidePlugin({
$:'jquery'  //jq注入，按需使用
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',//公共模块提取，什么名为vendors的js
minChunks: Infinity,
chunks: ['home', 'list', 'about'],//提取哪些模块共有的部分
minChunks: pageNameList.length,//至少三个模块共有部分，才会进行提取

}),
new ExtractTextPlugin({
filename: 'css/[name].css',  //每个页面css
allChunks: true,

}),
new progressbarWebpack(),  //进度条
new CleanWebpackPlugin('./dist'),  //构建dist之前清除老版目录
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
],
}

//生成绝对路径
function resolve(dir) {
return path.join(__dirname, dir)
}

module.exports={
plugins:[
require('autoprefixer')   //css3兼容配置
]
}