webpack 學習（5）--- 使用uglify-js 壓縮打包JS程式碼
阿新 • • 發佈：2019-01-27
一、webpack 外掛機制介紹：
外掛可以完成更多loader不能完成的功能。外掛的使用一般是在webpack的配置資訊 plugins選定中指定。Webpack本身內建了一些常用的外掛，還可以通過npm安裝第三方外掛。
二、uglify-js介紹：
ugligy-js是一個用npm安裝的JavaScript程式碼壓工具，我們在grunt和gulp中經常使用。
用npm命令進行安裝：
npm install uglify-js g最常用的方法：
uglifyjs [input files] [options]三、用Webpack中的uglify-js壓縮Demo
- 新建index.js檔案
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script type="text/javascript" src="dist/bundle.js"></script> </body> </html>
- 新建main.js檔案
document.write("<h1>Hello World</h1>");
- 新建webpack.config.js檔案
var webpack = require('webpack'); module.exports = { entry: './main.js', output: { path: __dirname, filename: 'bundle.js' }, plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] };
- 使用webpack命令進行打包 ，檢視檔案壓縮