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