Vue webpack配置文件

一、代码地址

github：https://github.com/MengFangui/VueWebpackConfig

二、配置说明

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

//处理共用、通用的js

var 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 （用于线上环境）

//处理共用、通用的js

var 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"

  }

}

巴特西

Vue webpack配置文件

最新文章

热门文章