webpack3最新版本配置研究(四)webpack压缩,clean-webpack-plugin,webpack-manifest-plugin,define-plugin
2017-07-18 00:11
1041 查看
webpack.optimize.UglifyJsPlugin
前端代码优化自然少不了压缩了,在webpack中也可以使用它的插件来进行自动压缩,非常的方便
再继续npm run webpack之后发现,public/js里面的js都被压缩了
npm install –save-dev clean-webpack-plugin
npm install –save-dev webpack-manifest-plugin
运行npm run webpack之后,public中会生成一个manifest.json的文件来显示映射关系
npm install webpack之后会发现index.html中间输出了定义的consoletest对应的字符串
前端代码优化自然少不了压缩了,在webpack中也可以使用它的插件来进行自动压缩,非常的方便
// A:webpack.config.js // B: ... // A: ... // 头部加上webpack的声明 const webpack = require('webpack'); // plugins里面加上一条配置 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, output: { comments: false, }, }),
再继续npm run webpack之后发现,public/js里面的js都被压缩了
clean-webpack-plugin
在webpack中打包生成的文件会覆盖之前的文件,不过生成文件的时候文件名加了hash之后会每次都生成不一样的文件,这就会很麻烦,不但会生成很多冗余的文件,还很难搞清楚到底是哪个文件,这就需要引入该插件npm install –save-dev clean-webpack-plugin
//webpack.config.js //引入clean-webpack-plugin const CleanWebpackPlugin = require('clean-webpack-plugin'); //plugin插入你想删除的路径,注意在生成出来文件之前,他会删除public的文件夹,而不是根据生成的文件来删除对应的文件,如果文件夹中所有的文件都是根据webpack生成的,,所以有什么额外的文件最好别引用这个!!! new CleanWebpackPlugin(['public']);
webpack-manifest-plugin
该插件可以显示出编译之前的文件和编译之后的文件的映射npm install –save-dev webpack-manifest-plugin
//webpack.config.js const ManifestPlugin = require('webpack-manifest-plugin'); //plugin插入 new ManifestPlugin({ fileName: 'manifest.json', basePath: '/public/', })
运行npm run webpack之后,public中会生成一个manifest.json的文件来显示映射关系
DefinePlugin
这个是webpack自带插件不用install,他会类似定义一个变量,在webpack中编译的时候可以使用//webpack.config.js中plugin加些测试数据 //每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。 //如果这个值是一个字符串,它会被当作一个代码片段来使用。 //如果这个值不是字符串,它会被转化为字符串(包括函数)。 //如果这个值是一个对象,它所有的 key 会被同样的方式定义。 //如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。 new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify("5fa3b9"), BROWSER_SUPPORTS_HTML5: true, TWO: "1+1", "typeof window": JSON.stringify("object"), consoletest: JSON.stringify('this is a console test') }) //index.js增加一个 console.log(consoletest);
npm install webpack之后会发现index.html中间输出了定义的consoletest对应的字符串
相关文章推荐
- webpack3最新版本配置研究(三)webpack压缩,clean-webpack-plugin,webpack-manifest-plugin,define-plugin
- webpack3最新版本配置研究(五) devtool,webpack-dev-server,CommonsChunkPlugin
- webpack3最新版本配置研究(四) devtool,webpack-dev-server,CommonsChunkPlugin
- webpack3最新版本配置研究(三)多入口,html-webpack-plugin, extract-text-webpack-plugin
- webpack3最新版本配置研究(二)loader
- webpack3最新版本配置研究(一)loader
- webpack3最新版本配置研究(二)loader
- node最新版本导致webpack安装 报错Maximum call stack size exceeded
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
- Webpack2/3配置ExtractTextPlugin和Autoprefixer
- webpack ^4.0.1 版本的webpack.config.js配置
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- webpack + vuejs(都是1.0的版本) 基本配置(一)
- webpack-manifest-plugin
- clean-webpack-plugin
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
- webpack4 系列教程(十四):Clean Plugin and Watch Mode
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
- webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)