This time I will bring you the tutorial instructions for packaging and compressing js and css using webpack. What are the precautions for packaging and compressing js and css with webpack? The following is a practical case, let’s take a look.
Packaging and compressing js and css
Since webpack itself integrates the UglifyJS plug-in (webpack.optimize.UglifyJsPlugin) to complete the compression and obfuscation of JS and CSS, there is no need to reference additional Plug-in, The command webpack -p means calling UglifyJS to compress the code. There are also many webpack plug-ins such as html-webpack-plugin that will use UglifyJS by default. The release version of uglify-js only supports ES5. If you want to compress ES6 code, please use the development branch.The options available for UglifyJS are:
parse Interpretationcompress Compressionmangle Obfuscationbeautify Beautify minify Minimize //Use CLI in the plug-in HtmlWebpackPlugin Command line tool sourcemap Mapping of compiled code to source code, used for web page debuggingAST Abstract syntax treename Name, includingvariable name, function name, attribute name
toplevel top-level scopeunreachable unreachable codeoption OptionSTDIN Standard input, refers to directly inputting STDOUT on the command line Standard outputSTDERR Standard error outputside Effects function side effects, that is, the function has other effects besides returning, such as changing the global variable List a configuration://使用插件html-webpack-plugin打包合并html //使用插件extract-text-webpack-plugin打包独立的css //使用UglifyJsPlugin压缩代码 var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var webpack = require("webpack"); module.exports = { entry: { bundle : './src/js/main.js' }, output: { filename: "[name]-[hash].js", path: dirname + '/dist' }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.(png|jpg|jpeg|gif)$/, use: 'url-loader?limit=8192' } ] }, resolve:{ extensions:['.js','.css','.json'] //用于配置程序可以自行补全哪些文件后缀 }, plugins:[ new HtmlWebpackPlugin({ title: 'hello webpack', template:'src/component/index.html', inject:'body', minify:{ //压缩HTML文件 removeComments:true, //移除HTML中的注释 collapseWhitespace:true //删除空白符与换行符 } }), new ExtractTextPlugin("[name].[hash].css"), new webpack.optimize.UglifyJsPlugin({ compress: { //压缩代码 dead_code: true, //移除没被引用的代码 warnings: false, //当删除没有用处的代码时,显示警告 loops: true //当do、while 、 for循环的判断条件可以确定是,对其进行优化 }, except: ['$super', '$', 'exports', 'require'] //混淆,并排除关键字 }) ] };
How to turn off eslint code verification in the vue project
Vue.js Flask\Build a single-page APP case Detailed explanation (with code)
The above is the detailed content of Webpack package and compress js and css tutorial instructions. For more information, please follow other related articles on the PHP Chinese website!