使用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的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. 第27章 LTDC/DMA2D—液晶显示—零死角玩转STM32-F429系列

    第27章     LTDC/DMA2D—液晶显示 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.co ...

  2. VisualSVN 4.0.10 破解版 附上破解过程

    VisualSVN一般情况下使用不需要破解,可以直接使用社区授权.但是社区授权不支持域用户. 如果要再域下面使用就需要破解了. 原版的VisualSVN和破解后的DLL已打包上传(仅供学习使用) 破解 ...

  3. 浅谈Docker

    一.为什么使用Docker 软件开发最大的麻烦事之一,就是环境配置.很多人想到,能不能从根本上解决问题,软件可以带环境安装? 也就是说,安装的时候,把原始环境一模一样地复制过来. 目前有两个主流解决方 ...

  4. maven入门2

    1.修改maven本地仓库位置 没有效果,在新建项目时还是转跳到默认配置 在默认仓库位置添加修改后的setting文件,失败 修改成功,原因是前面修改的是setting而我们需要修改的是default ...

  5. Java OOP——JAVA关键字与保留字说明及使用

    1.abstract abstract 关键字可以修改类或方法. abstract 类可以扩展(增加子类),但不能直接实例化. abstract 方法不在声明它的类中实现,但必须在某个子类中重写. - ...

  6. js如何获得系统时间年月日时分秒

    javascript 自带有个对象(构造函数),Date().下面是代码: 回答一: var now = new Date();  var nowTime = now.toLocaleString() ...

  7. tcl之其他命令-eval/source

  8. php 变量的8类类型

    整形,布尔,浮点形,字符串,数组,资源,对象和null php数据类型之查看和判断数据类型 php数据类型之自动转换和强制转换

  9. iar注释快捷键

    选中多行后注释快捷键:Ctrl+K 取消多行注释快捷键:Ctrl+Shift+K

  10. [CQOI2007]余数求和 (分块+数学

    题目描述 给出正整数n和k,计算G(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值,其中k mod i表示k除以i的余数.例如G(10, 5)=5 ...