optimization - How optimize css/less by webpack? -
i have optimized js, how optimize css , less files?
i'm not sure code (it have):
{ test: /\.less$/, loader: "style!css!autoprefixer!less" },
i tried use: https://github.com/webpack-contrib/less-loader no result, result error on build.
maybe reason have 1 less file , inside lot of different import. , can import css, min.css, less.
@import "hud/styling/hud.less"; @import "~video.js/dist/video-js.min.css"; @import "canvas/spots.css";
the main goal should have 1 js file (as have) css without comments , spaces generated less or css.
there packaged called optimize-css-assets-webpack-plugin. simple css webpack setup use
var webpack = require('webpack'); var path = require('path'); var extracttextplugin = require("extract-text-webpack-plugin"); var optimizecssassetsplugin = require("optimize-css-assets-webpack-plugin"); module: { rules: [{ use: [{ test: /\.(less|css)$/, use: extracttextplugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'less-loader'] }) }] }, plugins: [ new extracttextplugin("styles.css"), new optimizecssassetsplugin({ assetnameregexp: /\.optimize\.css$/g, cssprocessor: require('cssnano'), cssprocessoroptions: { discardcomments: {removeall: true } }, canprint: true }), ] module.exports = config
this css webpack part not complete webpack config
Comments
Post a Comment