Vue webpack配置文件

2018-06-24 01:07:01来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、代码地址

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Parcel + Vue 2.x 极速零配置打包体验

下一篇:浅谈jQuery的promise