使用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. Advanced Memory Allocation 内存分配进阶［转］

    May 01, 2003  By Gianluca Insolvibile  in Embedded Software Call some useful fuctions of the GNU C l ...

  2. hbase的coprocessor使用(转)

    http://www.360doc.com/content/13/0320/09/4675893_272623864.shtml

  3. jQuery实现轮播切换以及将其封装成插件（3）

    在前两篇博文中,我们写了一个普通的轮播切换.但是我们不能每一次需要这个功能就把这些代码有重新敲一次.下面我们就将它封装成一个插件. 至于什么是插件,又为什么要封装插件,不是本文考虑的内容.  我们趁着 ...

  4. ThinkPHP 更新数据 save方法

    ThinkPHP save() 方法 ThinkPHP 中使用 save() 方法来更新数据库,并且也支持连贯操作的使用. 例子: public function update(){ header(& ...

  5. 【Java】常用数据类型转换（BigDecimal、包装类、日期等）

    新工作转到大数据方向,每天都要面对数据类型互相转换的工作,再加上先前面试发现这部分的知识盲点, 决定复习之余自己再写一套便捷的方法,以后会比较方便.(虽然公司有现成封装的类,里头还有些遗漏的地方,暂时 ...

  6. Shell简介：1分钟理解什么是Shell 脚本语言 解释器 以及编译器和编译语言

    Shell简介:1分钟理解什么是Shell 脚本语言 解释器 以及编译器和编译语言 现在我们使用的操作系统(Windows.Mac OS.Android.iOS 等)都是带图形界面的,简单直观,容易上 ...

  7. noip2018 洛谷 P5020 货币系统

    关键: 要使m最小,(m,b)中的数不能用(n,a)中的数表示出来 对于 3  19  10  6 19=10+3+3+3 6=3+3 只有3 和 10 不能被(n,a)中的数表示 所以m=2 只需要 ...

  8. 利用bootstrap实现图片Carousel效果

    引入头文件: <link rel="stylesheet" href="bootstrap.min.css"> <link rel=" ...

  9. 解决 div或者a标签的高度比里面的img高度多的 问题

    今天做练习遇到一个问题,分享一下解决办法: 在编写html中的一个放置图片时,代码如下: <div class="nrtp"> <div class=" ...

  10. vim指令，快捷键汇总

    Vim 命令.操作.快捷键全集 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vi ...