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

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -