一、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命令进行打包 ,查看文件压缩