本篇文章主要介紹了webpack 打包壓縮js和css的方法範例,現在分享給大家,也給大家做個參考。
打包壓縮js與css
由於webpack本身整合了UglifyJS外掛程式(webpack.optimize.UglifyJsPlugin)來完成對JS與CSS的壓縮混淆,無需引用額外的插件,
其指令webpack -p 即表示呼叫UglifyJS來壓縮程式碼,還有不少webpack外掛程式如html-webpack-plugin 也會預設使用UglifyJS。
uglify-js的發行版本只支援ES5,如果你要壓縮ES6 程式碼請使用開發分支。
UglifyJS可用的選項有:
parse 解釋
compress 壓縮
mangle 混淆# 壓縮
mangle
minify 最小化//在插件HtmlWebpackPlugin中使用
CLI #AST 抽象語法樹
name 名字,包括變量名、函數名、屬性名
toplevel 頂層作用域
unreachable 不可達代碼
option選項
STDIN 標準輸入,指在指令列中直接輸入
STDOUT 標準輸出
STDERR 與標準錯誤輸出
#Namp函數#nectp,即函數#d除了返回外還產生別的作用,例如改了全域變數列一份配置://使用插件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({ compress: { //压缩代码 dead_code: true, //移除没被引用的代码 warnings: false, //当删除没有用处的代码时,显示警告 loops: true //当do、while 、 for循环的判断条件可以确定是,对其进行优化 }, except: ['$super', '$', 'exports', 'require'] //混淆,并排除关键字 }) ] };這裡需要注意的是壓縮的時候需要排除一些關鍵字,不能混淆,例如$或require,如果混淆的話就會影響到程式碼的正常運作。 列幾個壓縮時常有的屬性: dead_code -- 移除沒被引用的程式碼
相關文章:
以上是webpack 打包壓縮js和css的方法範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!