Webpack 之less-loader 详解- SegmentFault 思否

将打包的less文件分离出来在官方文档看到这样一个例子： {代码...} 但是我... ... 安装. npm install --save-dev less-loader less ... 注册登录问答专栏课程招聘活动发现✓使用“Bing”搜本站使用“Google”搜本站使用“百度”搜本站站内搜索注册登录首页专栏webpack文章详情1Webpack之less-loader详解Meils发布于2018-03-24 安装 npminstall--save-devless-loaderless 使用 先来一个小栗子： //layer.js //首先我引入了layer.less import'./layer.less'; functionlayer(){ return{ name:'layer', template:tep }; } exportdefaultlayer; //layer.less @import'./flex.less'; .layer{ width:600px; height:400px; background:green; .div{ width:300px; height:200px; background:#ccc; } } //flex.less .div{ display:flex; } //webpack.comfig.js //该配置是延续上一版写的，只需看处理.less那块就好 varhtmlWebpackPlugin=require('html-webpack-plugin') constpath=require('path') module.exports={ mode:'development', entry:'./src/app.js', output:{ filename:'js/bundle.js', path:path.resolve(__dirname,'dist') }, module:{ rules:[ { test:/\.js$/, exclude:/(node_modules|bower_components)/,//优化处理加快速度 use:{ loader:'babel-loader', options:{ presets:['@babel/preset-env'] } } }, { test:/\.css$/, exclude:'/node_modules/', use:[ { loader:'style-loader' }, { loader:'css-loader', options:{ importLoaders:1 } }, { loader:'postcss-loader', options:{ ident:'postcss', plugins:(loader)=>[ require('postcss-import')({root:loader.resourcePath}), require('postcss-cssnext')(), require('autoprefixer')(), require('cssnano')() ] } } ] }, { test:/\.less$/, exclude:'/node_modules', use:[ { loader:'style-loader' }, { loader:'css-loader', options:{ importLoaders:1 } }, { loader:'postcss-loader', options:{ ident:'postcss', plugins:(loader)=>[ require('postcss-import')({root:loader.resourcePath}), require('postcss-cssnext')(), require('autoprefixer')(), require('cssnano')() ] } }, { loader:'less-loader',// options:{ importLoaders:1 } } ] } ] }, plugins:[ newhtmlWebpackPlugin({ template:'index.html', inject:'body', filename:'index.html' }) ] } //需要注意的是顺序问题：style-loader->css-loader->postcss-loader->less-loader执行顺序于此相反。

将打包的less文件分离出来 在官方文档看到这样一个例子： //需要npm安装extract-text-webpack-plugin插件 constExtractTextPlugin=require("extract-text-webpack-plugin"); constextractLess=newExtractTextPlugin({ filename:"[name].[contenthash].css", disable:process.env.NODE_ENV==="development" }); module.exports={ ... module:{ rules:[{ test:/\.less$/, use:extractLess.extract({ use:[{ loader:"css-loader" },{ loader:"less-loader" }], //usestyle-loaderindevelopment fallback:"style-loader" }) }] }, plugins:[ extractLess ] }; 但是我这里使用的是webpack4X，而extract-text-webpack-plugin只支持webpack3X。

那webpack4X怎么对css分离呢，需要安装mini-css-extract-plugin 稍后会补充一个mini-css-extract-plugin的例子~~ 如果想使用插件 //只需在options中配置即可 //webpack.config.js constCleanCSSPlugin=require("less-plugin-clean-css"); module.exports={ ... { loader:"less-loader",options:{ plugins:[ newCleanCSSPlugin({advanced:true}) ] } }] ... }; webpack阅读17.3k发布于2018-03-24赞1收藏1分享本作品系原创，采用《署名-非商业性使用-禁止演绎4.0国际》许可协议Meils前端开发实践者1.6k声望155粉丝关注作者0条评论得票最新提交评论Meils前端开发实践者1.6k声望155粉丝关注作者文章目录跟随宣传栏▲11