webpack分离打包css和less

github仓库：https://github.com/llcMite/webpack.git

为什么要分离打包？

答：刚开始学webpack的时候就很郁闷，明明没几个文件，打包出来体积特别的大，看着它体积大就是不爽

这里只需要一个插件（extract-text-webpack-plugin）就可以搞定了

webpack这里就不解释，不会的自己去官网看看，下面的配置文件是本人成功打包出来的配置，（插件是会更新）如果出现什么问题可以参考插件官方提供的用法，百度插件名字就可以找到插件官方用法了，这里要注意，不能重复配置css,我用的是less多一点，所以这里只研究了less的用法，不过sass用法差不多；

1)安装依赖

cnpm install less less-loader extract-text-webpack-plugin --save-dev

2）配置webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");const extractCSS = new ExtractTextPlugin('stylesheets/reset.css');
const extractLESS = new ExtractTextPlugin('stylesheets/less.css');module.exports={entry:'./index.js',output:{path:__dirname,filename:'build.js'},module:{rules: [{test: /\.css$/,use: extractCSS.extract({fallback: "style-loader",use: "css-loader"})},{test: /\.less$/i,use: extractLESS.extract([ 'css-loader', 'less-loader' ])},]},plugins:  [extractCSS,extractLESS  ],
}

转载于:https://www.cnblogs.com/llcMite/p/7683275.html

webpack分离打包css和less相关推荐

html图片分开,webpack单独分离打包css，css里引用的图片路径错误，怎么解决？
现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致. 打包前: 从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如 ...
webpack 独立打包 css 文件
插件地址: extract-text-webpack-plugin 安装插件 npm install extract-text-webpack-plugin –save-dev 使用方法,在 webp ...
如何将一个html网页打包,webpack分离css单独打包的方法
本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG 2018-02-08 14:46:06 刚看了下,网上查了 webpack单独打包css,找到的文章,本文 ...
webpack分离css单独打包
原文地址为: webpack分离css单独打包 CHANGELOG 2018-02-08 14:46:06 刚看了下,网上查了 webpack单独打包css,找到的文章,本文比较靠前,但是由于写的比较 ...
webpack 分离css html,webpack分离css并单独打包的方法
这篇文章主要介绍了webpack分离css单独打包的方法,内容挺不错的,现在分享给大家,也给大家做个参考. 本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG ...
webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
webpack打包css image,webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
The way of Webpack learning (IV.) -- Packaging CSS（打包css）
一:目录结构二:webpack.config.js的配置 const path = require('path');module.exports = {mode:'development',entr ...
webpack打包样式资源_使用loader去打包css文件_打包less文件---webpack工作笔记004
然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是不能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 ...
Webpack打包css文件-css-loader+style-loader
一,前言之前"webpack介绍"一篇中提到webpack的四个核心概念:entry-入口,output-出口,loader-加载器,plugins-插件前面打包和输出文件使用了 ...

webpack分离打包css和less

webpack分离打包css和less相关推荐

最新文章

热门文章