1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > webpack压缩文件配置(html css js)

webpack压缩文件配置(html css js)

时间:2019-01-19 16:33:00

相关推荐

webpack压缩文件配置(html css js)

JS 文件的压缩,webpack内置了 uglifyjs-webpack-plugin,打包都是默认压缩了的

当然也可以手动安装

npm i -D uglifyjs-webpack-plugin

CSS 文件的压缩,使用 optimize-css-assets-webpack-plugin,同时使用 cssnano 预处理器(cssnano需要另外安装)

需要先安装这两个插件

npm i -D optimize-css-assets-webpack-pluginnpm i -D cssnano

配置

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')module.exports = {entry: {app: './src/app.js',search: './src/search.js'},output: {filename: '[name][chunkhash:8].js',path: __dirname + '/dist'},plugins: [+ new OptimizeCSSAssetsPlugin({+ assetNameRegExp: /\.css$/g,+ cssProcessor: require('cssnano’)+ })]};

html 文件的压缩,修改 html-webpack-plugin,设置压缩参数

安装插件

npm i -D html-webpack-plugin

配置

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {app: './src/app.js',search: './src/search.js'},output: {filename: '[name][chunkhash:8].js',path: __dirname + '/dist'},plugins: [+ new HtmlWebpackPlugin({+ template: path.join(__dirname, 'src/search.html’),+ filename: 'search.html’,+ chunks: ['search’],+ inject: true,+ minify: {+ html5: true,+ collapseWhitespace: true,+ preserveLineBreaks: false,+ minifyCSS: true,+ minifyJS: true,+ removeComments: false+ }+ })]};

运行 npm run build 即可

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。