用webpack打包vue项目（单页面应用）的webpack.c

场景：
vue项目（单页面应用）已完成；
用webpack打包vue项目准备上线；

在项目根目录（手写）创建打包配置文件webpack.config.prod.js,框架及内容如下。

//引包：打包成页面用到的webpack+html
const webpack = require("webpack");
//htmlWebpackPlugin它的作用是根据chunk代码块生成文档
const htmlWebpackPlugin = require("html-webpack-plugin");
//引包：output需要用到字符串拼接
const path = require("path");
//引包：删除（旧的打包文件）dist目录
var cleanWebpackPlugin = require("clean-webpack-plugin");
//引包：抽离css的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
    entry:{ //（按实际写）这里放分解抽包后的入口文件-分解后的main.js
        // 在这里分了多少个口，main.js及其引包的js库与插件就会被分解抽包成多少个
        // 最后的 bundle:"./src/main.js"为拆解了各包后剩下的部分
        // 【格式】最终js文件名: ['vue包名1', "vue包名2"]
    },
    output:{  //（固定写法）为分解抽包的js文件指定路径
        path: path.resolve(__dirname, 'dist'),  //需拼接路径所以前面得引包path
        filename: 'js/[name].js'
    },
    module:{  //（按实际写）加载器：文件loader，处理不同的静态资源
        // 【格式】{ test:/\.后缀名$/,   use:['xx-loader'] },
        // 【格式】{ test:/\.(后缀|后缀)$/,   use:[ { loader:'xx-loader', opinions:{  }]  },
        // 【格式】{ test:/\.(后缀|后缀)$/,   use:插件.调用({ fallback:"xx-loader", use:[{ loader:'xx-loader', opinions:{  }}]  }),
    },
    resolve:{ //（固定写法）可以不加后缀, 直接使用 import xx from 'xx' 的语法
        extensions: ['.vue', '.js', '.css']
    },
    plugins:[ //（按实际写）生成html前，打包专用组件的各种优化操作，如删旧dist、压缩、抽出包等

        // （固定写法）删除旧的dist打包文件夹
        new CleanWebpackPlugin('dist'),
        //其实要删除文件的路径可以是多个，视具体情况而定

        //（固定写法） 配置html
        new htmlWebpackPlugin({
            template: './template.html',  //从这儿出发
            filename: 'index.html',    //导成这个
            minify:{    //（固定写法）html的压缩配置
                removeComments: true,//移除注释
                minifyJS: true,//压缩js
                minifyCSS: true,//压缩css
                collapseWhitespace: true,//去除空格
                // collapseWhitespace: true, //(段子黄未用)移除空白
                // removeAttributeQuotes: true  //(段子黄未用)移除属性中的双引号
            }
        }),

        new webpack.ProvidePlugin({//（固定写法）全局导入jquery,将jquery挂载到windows上
            // 用于有些库，比如jquery、bootstrap，打包不会出错，但是放在浏览器下就出问题，原因是bootstrap在初始化的时候要传入全局的jQuery变量，webpack中各模块都是独立的，jquery也是，jQuery无法赋值到window上，导致报错，这时候，这个插件就派上用场了，将jquery模块输出到全局的jQuery变量上。让bootstrap不再报错（没用bootstrap用了jQuery的话也要全局导入jQuery）
            $: "jquery",
            jQuery: "jquery"
        }),
        
        //（固定写法）设置当前环境为生产环境
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),

        //（固定写法）使用UglifyJs对js代码进行压缩
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false, //去掉警告
                drop_debugger: true, //去掉调试器和调试语句
                drop_console: true //去除console.log
            },
            comments: false //去掉版权信息等注释约1k，也可以保留
        }),

        //（按实际写）抽离第三方包，这里不要写bundle.js
        new webpack.optimize.CommonsChunkPlugin({
            //（按实际写）抽离的第三方包
            name: ["quanjiatong", "vue-lazyload", "v-distpicker", "vue-moment", "jquery", "axios"],
            // 对应 entry 中拆解打包后的js文件名，除了bundle以外按顺序倒着写
            // filename: "vendor.js" //这是干嘛的？乐东看到了请告诉我
            // (给 chunk 一个不同的名字)

            // （固定写法）(随着 entry chunk 越来越多，这个配置保证没其它的模块会打包进 vendor chunk)
            minChunks: Infinity,
        }),

         // （固定写法）通过插件抽离 css
        new ExtractTextPlugin("css/styles.css")
            //参数：传入路径，表示将抽离的css文件生成到哪个目录中
    ]
}

后续更新...
还缺少npm三个包的安装、.Babel文件es6转es5的配置、打包完成后的（字体图标等的）路径校准等.

• package.json的scripts中增配置
  "build":"webpack --progress --config webpack.config.prod.js"
  
  
• 打包命令行 npm run build

2018.3.26