打包壓縮js與css
由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)來完成對JS與CSS的壓縮混淆,無需引用額外的插件,
webpack 源碼、其命令 webpack -p 即表示調用UglifyJS來壓縮代碼,還有不少webpack插件如 html-webpack-plugin 也會默認使用UglifyJS。
uglify-js的發行版本只支持ES5,如果你要壓縮ES6+代碼請使用開發分支。
UglifyJS可用的選項有:
vueconfigjs配置打包不壓縮?parse?????? 解釋
compress??? 壓縮
mangle????? 混淆
怎么運行webpack壓縮的項目,beautify??? 美化
minify????? 最小化//在插件HtmlWebpackPlugin中使用
CLI???????? 命令行工具
sourcemap?? 編譯后代碼對源碼的映射,用于網頁調試
AST???????? 抽象語法樹
name??????? 名字,包括變量名、函數名、屬性名
toplevel??? 頂層作用域
unreachable 不可達代碼
option????? 選項
STDIN?????? 標準輸入,指在命令行中直接輸入
STDOUT????? 標準輸出
STDERR????? 標準錯誤輸出
side effects函數副作用,即函數除了返回外還產生別的作用,比如改了全局變量
列一份配置:
//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包獨立的css
//使用UglifyJsPlugin壓縮代碼
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: {
bundle : './src/js/main.js'
},
output: {
filename: "[name]-[hash].js",
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /.(png|jpg|jpeg|gif)$/,
use: 'url-loader?limit=8192'
}
] },
resolve:{
extensions:['.js','.css','.json'] //用于配置程序可以自行補全哪些文件后綴
},
plugins:[
new HtmlWebpackPlugin({
title: 'hello webpack',
template:'src/component/index.html',
inject:'body',
minify:{ //壓縮HTML文件
removeComments:true, //移除HTML中的注釋
collapseWhitespace:true //刪除空白符與換行符
}
}),
new ExtractTextPlugin("[name].[hash].css"),
new webpack.optimize.UglifyJsPlugin({
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态