一、**位址
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
//
處理共用、通用的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, ,
plugins: [
newextracttextplugin(),
//定義當前 node 環境為生產環境
newwebpack.defineplugin(
}),//壓縮 js
newwebpack.optimize.uglifyjsplugin(
}),//提取模板,並儲存入口 html 檔案
newhtmlwebpackplugin(
}) ]
});
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, ,
plugins: [
newextracttextplugin(),
//定義當前 node 環境為生產環境
newwebpack.defineplugin(
}),//壓縮 js
newwebpack.optimize.uglifyjsplugin(
}),//提取模板,並儲存入口 html 檔案
newhtmlwebpackplugin(
}) ]
});
3、package.json
,
"author": "",
"license": "isc",
"devdependencies": ,
"dependencies":
}
更多專業前端知識,請上
【猿2048】www.mk2048.com
(vue)webpack配置檔案分離
在開發活動中,開發中用到的外掛程式和發布時用到的外掛程式往往是不相同的,比如為了提高 的簡潔性,我們會在發布時,使用 醜化外掛程式將 壓縮 而在開發過程中,為了方便除錯,是採用格式化後的 因此配置檔案也是不相同的,這也是我們配置檔案分離的初衷。npm install webpack merge d ...
drbd配置檔案 drbd配置檔案
drbd配置檔案 vim usr local drbd etc drbd.d global common.conf global usage count yes 是否參加drbd使用者統計 common protocol c 使用drbd的第三種同步協議 disk 使用dpod功能保證在數 on i...
vue webpack 手機測試配置
1.開啟命令視窗 win r 輸入 config 按回車,檢視ipv4位址2.vue cli webpack模板 找到config資料夾下的index.js檔案,開啟後,將host的值改為我本地的ip,儲存後重啟專案 即 host localhost 更改為 host 192.168.43.201 ...