webpack + less
使用less需要安装 'style-loader','css-loader','less-loader' 三个loader。
安装之后在webpack.config.js配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {//入口文件
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
plugins:[
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
],
output: {//输出文件
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(less|css)$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
]
}
};
执行命令，这个时候会发现样式写在页面<head>标签的里面。
如果样式少，这样看着还可以，但是多的话，还是外链的方式比较好，所以我们用 extract-text-webpack-plugin 来进行处理，先安装，接着继续修改配置。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {//入口文件
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
plugins:[
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new ExtractTextPlugin({
filename: 'index.css',
disable: false,
allChunks: true,
}),
],
output: {//输出文件
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(less|css)$/,
use: ExtractTextPlugin.extract({
use:[ 'css-loader','less-loader'],
fallback: 'style-loader',
}),
},
]
}
};
这时候执行命令结束之后，就会达到我们想要的结果。
webpack + less的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
- Webpack 配置摘要
open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- JavaSE 面试题总结
一. JavaSE 4 1. 面向对象的特征有哪些方面 4 2. String是最基本的数据类型吗? 4 3. super()与this()的区别? 4 4. JAVA的事件委托机制和垃圾回收机制 4 ...
- 通过增量备份恢复来处理Oracle DG 复制GAP
1.确定增备scn范围,通过alert日志获取gap日志序列GAP - thread 1 sequence 109631-117170 2.根据序列获取增备起点SCN提示最小gap序列为109631, ...
- substring和substr小结
substring 1 substring 方法用于提取字符串中介于两个指定下标之间的字符 2 substring(start,end) 开始和结束的位置,从零开始的索引 end:字符串下标,结束符是 ...
- Exception occurred during processing request: The given object has a null identifier: com.zsn.crm.Model.SaleVisit; nested exception is org.hibernate.TransientObjectException: The given object has a nu
edit.jsp页面没有加入隐藏字段 id ,导致模型驱动封装时缺少id ,,调用update更新数据库时出错!
- HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)
BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上 ...
- Spark Streaming 交互 Kafka的两种方式
一.Spark Streaming连Kafka(重点) 方式一:Receiver方式连:走磁盘 使用High Level API(高阶API)实现Offset自动管理,灵活性差,处理数据时,如果某一时 ...
- 学习Pytbon第九天，函数1 过程和参数
函数def func1():定义函数 '''testing1'''#函数的说明 print("in the func1")#定义过程 return 0 #得到函数的执行结果.还是程 ...
- B1071 小赌怡情 （15分）
B1071 小赌怡情 (15分) 常言道"小赌怡情".这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注 t 个筹码后,计 ...
- 006---Django静态文件配置
静态文件:Js.Css.Fonts.Image等 这个不难.在setting.py文件加一行 # 别名 用户在url地址栏输入127.0.0.1:8000/static/文件 可以直接访问static ...
- [BZOJ1927]星际竞速（费用流）
Description 题意:给定n个点m条边的无向图,只能从编号小的到编号大的,且要求经过所有点刚好一次,而且可以从任意点瞬移到i号点并花费代价Ai,求最小代价. n<=800,m<=1 ...