一、代码地址

github：

 

二、配置说明

1、命令

（1）npm i 安装依赖包

（2）num run dev 发布调试环境

（3）npm run bulid 发布线上环境

 

2、功能

（1）处理vue文件

（2）处理js文件

（3）ES6编译

（4）css处理（包括自动添加前缀）

（5）图片处理

（6）线上环境：文件MD5（hash）

（7）线上环境：文件压缩（js压缩）

（8）线上环境：模板文件处理

 

三、关键文件

1、webpack.config.js

//处理共用、通用的jsvar webpack = require('webpack');//处理html模板var HtmlWebpackPlugin = require('html-webpack-plugin');//css单独打包var ExtractTextPlugin = require('extract-text-webpack-plugin');var merge = require('webpack-merge');var webpackBaseConfig = require('./webpack.config.js');// 清空基本配置的插件列表webpackBaseConfig.plugins = [];module.exports = merge(webpackBaseConfig, {    output: {        //用于在生产模式下更新内嵌到css、html文件里的url值        publicPath: 'dist/',        // 将入口文件重命名为带有 20 位 hash 值的唯一文件        filename: '[name].[hash].js'    },    plugins: [        new ExtractTextPlugin({            // 提取 css，并重命名为带有 20 位 hash 值的唯一文件            filename: '[name].[hash].css',            allChunks: true        }),        // 定义当前 node 环境为生产环境        new webpack.DefinePlugin({            'process.env': {                NODE_ENV: '"production"'            }        }),        // 压缩 js        new webpack.optimize.UglifyJsPlugin({            compress: {                warnings: false            }        }),        // 提取模板，并保存入口 html 文件        new HtmlWebpackPlugin({            //输出文件            filename: '../index_prod.html',            //模板文件            template: './index.ejs',            inject: false,            //html压缩//          minify:{
     //              //删除注释//              removeComments:true,//              //删除空格//              collapseWhitespace:true//          }        })    ]});

2、webpack.prod.config.js （用于线上环境）

//处理共用、通用的jsvar webpack = require('webpack');//处理html模板var HtmlWebpackPlugin = require('html-webpack-plugin');//css单独打包var ExtractTextPlugin = require('extract-text-webpack-plugin');var merge = require('webpack-merge');var webpackBaseConfig = require('./webpack.config.js');// 清空基本配置的插件列表webpackBaseConfig.plugins = [];module.exports = merge(webpackBaseConfig, {    output: {        //用于在生产模式下更新内嵌到css、html文件里的url值        publicPath: 'dist/',        // 将入口文件重命名为带有 20 位 hash 值的唯一文件        filename: '[name].[hash].js'    },    plugins: [        new ExtractTextPlugin({            // 提取 css，并重命名为带有 20 位 hash 值的唯一文件            filename: '[name].[hash].css',            allChunks: true        }),        // 定义当前 node 环境为生产环境        new webpack.DefinePlugin({            'process.env': {                NODE_ENV: '"production"'            }        }),        // 压缩 js        new webpack.optimize.UglifyJsPlugin({            compress: {                warnings: false            }        }),        // 提取模板，并保存入口 html 文件        new HtmlWebpackPlugin({            //输出文件            filename: '../index_prod.html',            //模板文件            template: './index.ejs',            inject: false,            //html压缩//          minify:{
     //              //删除注释//              removeComments:true,//              //删除空格//              collapseWhitespace:true//          }        })    ]});

3、package.json

{  "name": "hello",  "version": "1.0.0",  "description": "",  "main": "main.js",  "scripts": {    "dev": "webpack-dev-server --open --config webpack.config.js",    "bulid": "webpack --progress --hide-modules --config webpack.prod.config.js"  },  "author": "",  "license": "ISC",  "devDependencies": {    "autoprefixer": "^7.2.3",    "babel": "^6.23.0",    "babel-core": "^6.24.0",    "babel-loader": "^6.4.1",    "babel-plugin-transform-runtime": "^6.23.0",    "babel-preset-es2015": "^6.24.0",    "babel-preset-latest": "^6.24.1",    "babel-runtime": "^6.23.0",    "css-loader": "^0.27.3",    "extract-text-webpack-plugin": "^2.1.0",    "file-loader": "^0.10.1",    "html-webpack-plugin": "^2.30.1",        "style-loader": "^0.16.1",    "url-loader": "^0.5.9",    "vue-hot-reload-api": "^2.0.11",    "vue-loader": "^11.3.4",    "vue-style-loader": "^2.0.5",    "vue-template-compiler": "^2.2.6",    "webpack": "^2.3.2",    "webpack-dev-server": "^2.4.2",    "webpack-merge": "^4.1.1"  },  "dependencies": {    "vue": "^2.2.6"  }}