webpack---webpack构建vue多页面框架（三、生产环境与开发环境）

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

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

---

---

3.生产环境与开发环境

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');  //开发环境下打开默认浏览器
const progressbarWebpack = require('progress-bar-webpack-plugin');

const prod = process.env.NODE_ENV === 'production' ? true : false;  //确认生产环境变量

let hostName = "127.0.0.1";
let devPort = "8088";


module.exports = {
    entry: {
        home:'./src/APPpages/home/*.js',
        list:'./src/APPpages/list/*.js',
        about:'./src/APPpages/about/*.js',
    },
    output: {
        path: resolve('./dist'),
        publicPath: prod ? '../' : '/dist/', //区别开发与生产环境，设置不同路径
        filename: 'js/[name].js',
        chunkFilename: 'js/common/[id].chunk.js'
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js',
            'common':resolve('./src/APPcommon')
        }
    },

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    transformToRequire: {
                        video: 'src',
                        source: 'src',
                        img: 'src',
                        image: 'xlink:href'
                    }
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader?attrs=img:src img:data-src'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                enforce: 'pre',
                include: resolve('src'),
                exclude: ['node_modules/'],
                query: {
                    presets: ['latest']
                }
            },
            {
                test: /\.scss$/,
                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]',
                }
            },
            {
                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'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',//公共模块提取，名为vendors的js
            minChunks: Infinity,
            chunks: ['home', 'list', 'about'],//提取哪些模块共有的部分
            minChunks: pageNameList.length,//至少三个模块共有部分，才会进行提取

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

        }),
        new OpenBrowserPlugin({
            url: 'http://' + hostName + ':' + devPort + '/dist/views/test.html',  //测试页面选择test.html，可以自己更改
        }),
        new webpack.HotModuleReplacementPlugin(), //开发环境下热更新
        new progressbarWebpack(),

        //打包html配置
        new HtmlWebpackPlugin({
           filename: 'views/home.html',//打包home页生成home.html
           template: './src/APPcommon/view/index.html', //模板文件
           inject: 'body',  //js放在body底部
           chunks: ['vendors', 'home'], //引入公用vendors.js与home.js
           minify: {
             //html压缩配置
              removeAttributeQuotes: true,
              collapseWhitespace: true
          }
      }),
      new HtmlWebpackPlugin({
           filename: 'views/list.html',//打包list页生成home.html
           template: './src/APPcommon/view/index.html', //模板文件
           inject: 'body',  //js放在body底部
           chunks: ['vendors', 'list'], //引入公用vendors.js与list.js
           minify: {
             //html压缩配置
              removeAttributeQuotes: true,
              collapseWhitespace: true
          }
      }),
      new HtmlWebpackPlugin({
           filename: 'views/about.html',//打包about页生成about.html
           template: './src/APPcommon/view/index.html', //模板文件
           inject: 'body',  //js放在body底部
           chunks: ['vendors', 'about'], //引入公用vendors.js与about.js
           minify: {
             //html压缩配置
              removeAttributeQuotes: true,
              collapseWhitespace: true
          }
      }),
    ],

//开发环境，常用配置
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: devPort,
        host: hostName,
        inline: true,
        hot: true,
        noInfo: true,
        historyApiFallback: true,
    },
    performance: {
        hints: false
    },
};

module.exports.plugins = (module.exports.plugins || []).concat(proHtmlPlugin);

if (prod) {
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new CleanWebpackPlugin('./dist'),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
};

function resolve(dir) {
    return path.join(__dirname, dir)
}


function getEntry() {
    var entry = {};
    //读取开发目录,并进行路径裁剪 
    glob.sync('./src/APPpages/**/*.js')
        .forEach(function (name) {
            var start = name.indexOf('src/') + 4,
                end = name.length - 3;
            var eArr = [];
            var n = name.slice(start, end);
            n = n.slice(0, n.lastIndexOf('/')); //保存各个组件的入口 
            n = n.split('/')[1];
            eArr.push(name);
            entry[n] = eArr;
        });
    return entry;
};

function getHtmlPlugin(name) {
    return (new HtmlWebpackPlugin({
        // favicon: resolve('../src/APPcommon/img/fav.png'),
        filename: 'views/' + name + '.html',
        template: './src/APPcommon/view/index.html',
        inject: 'body',
        chunks: ['vendors', name],
        minify: {
            removeAttributeQuotes: true,
            collapseWhitespace: true
        }
    })
    )
}

package.json

{
  "name": "vue-app",
  "version": "1.0.0",
  "description": "webpack to build the multiple pages of vue",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "author": "wbiokr",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-latest": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "cross-env": "^3.0.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.0",
    "html-webpack-plugin": "^2.30.1",
    "mint-ui": "^2.2.9",
    "node-sass": "^4.5.3",
    "open-browser-webpack-plugin": "^0.0.5",
    "postcss-loader": "^2.0.6",
    "progress-bar-webpack-plugin": "^1.10.0",
    "sass-loader": "^6.0.6",
    "serve": "^6.0.5",
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue": "^2.4.2",
    "vue-loader": "^13.0.2",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

下一章：四.自动化构建