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

webpack+vue已经成为单页面程序标配！其实webpack构建vue多页面程序也是相当出色！

1. 工程布局；
2. webpak.config.js；
3. 生产环境与开发环境；
4. 自动化构建；
5. 源码GitHub；

---

---

2.webpak.config.js

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)
}       

postcss.config.js

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

下一章：三. 生产环境与开发环境