webpack 学习（5）--- 使用uglify-js 压缩打包JS代码

本文链接：https://blog.csdn.net/weixin_37580235/article/details/81813110

一、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
            }
        })
    ]
};