Webpack：代码压缩(js、css、html) - Githubissues

hubvue / webpack-learn

webpack的一些知识

3 stars 0 forks source link

Webpack：代码压缩(js、css、html) #2

Open hubvue opened 5 years ago

hubvue commented 5 years ago

JavaScript代码的压缩

webpack内置了uglifyjs-webpack-plugin插件，这个插件可以对JavaScript文件进行压缩，在生产环境构建的时候默认开启。

CSS代码的压缩

webpack压缩css代码可以通过optimize-css-assets-webpack-plugin + cssnano来进行

new OptimizeCssAssetsWebpackPlugin({
      assetNameRegExp: /\.css$/,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }]
      },
      canPrint: true
}),

assetNameRegExp用于匹配css文件
cssProcessor 使用cssnano处理器对css进行压缩
cssProcessorPluginOptions 往css处理器中传入的参数
canPrint 控制是否将消息打印到控制台，默认为true

HTML代码的压缩

webpack压缩HTML通过html-webpack-plugin这个神器插件进行。

    new HtmlWebpackPlugin({
      template: resolve('./views/index.html'),
      filename: 'index.html',
      inject: true,
      minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: true
      }
}),

html5 支持对html5标签的解析
collapseWhitespace 删除html文档中文本节点的空白
preserveLineBreaks 删除html文档中的换行
minifyCSS 压缩html文档中的css
minifyJS 压缩html文档中的js
removeComments 删除html文档中的注释节点

更多的选项