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

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

打包不了,一直显示错误。。。。

猜你喜欢

转载自blog.csdn.net/weixin_37580235/article/details/81813110
今日推荐