编译

Webpack配置Less自动编译

使用webpack从Less中抽取css、字体、图片等资源,分门别类编译放置前端资源

2018-05-10侠课岛    初级拔高       

前端/前端必修/搭建Webpack编译Less环境 15     0     3669

上一节安装完webpack编译环境之后,这节我们来配置webpack.config.js。主要内容包括: 

  • 分析webpack.config.js文件基本结构 

  • 配置loaders 

  • 测试编译 

webpack.config.js配置 

webpack.config.js文件基本结构 

 因为webpack功能十分强大,各种loader加上插件能花式实现前端编译工程化,所以对于刚刚入门的开发者来说,一开始看到那些复杂的配置文件是不是眼睛都花了呢?

其实,我们只要掌握了webpack.config.js文件的核心结构,将它拆分出来看,就比较好理解啦~像本节所用到的配置文件,就比较简单,很适合初学者用来理解文件结构。

首先,webpack核心思想就是模块化,那么这个配置文件同样也是采用模块化的方式,最外层是commonJS模块化导出语法,将文件以模块化的方式导出。

module.exports={
}
  • entry是webpack开始编译的入口文件,webpack会从这个文件开始,一层一层往下遍历文件,这里我们把入口文件设置成./index,这样webpack就会以项目文件夹下面的index.js文件为入口。入口文件后缀是.js,所以不用文件后缀名。

module.exports={
    entry:'./index'
}
  • output可以理解为webpack的出口,其中path定义webpack编译出来的文件存放的位置,我们这里把编译出来的资源文件夹命名为dist__dirname则是node.js中的全局变量,表示的是当前文件所在的目录,那在这里自然就表示根目录啦;而另外一个属性filename是定义编译出来的文件名字,最终webpack会编译出一个js文件,注意要把这个文件引入index.html里面噢。

所以下面这段代码的意思就是告诉webpack,以./index.js这个文件为入口,生成一个叫bundle.js的可执行js文件,并将打包编译好的文件存放在dist文件夹下。

module.exports={
    entry:'./index',
    output:{
        path: __dirname+'/dist',
    filename: 'bundle.js'
    }
}

 其实有了以上两个属性,webpack就可以正常运行啦~接下来的属性则是扩展功能,让webpack发挥功能的关键~ 

  • module,因为模块化是webpack最重要的思想,它将所有资源都看做是模块,模块就需要使用loaders加载器来加载,在webpack2.0以上的版本,旧的loaders被新的rules取代,后者允许配置loader以及其他更多项。 

module.exports={
    entry:'./index',
    output:{
        path: __dirname+'/dist',
    filename: 'bundle.js'
    },
    module:{
        rules:[
        ]
    }
}

配置loader 

在本节我们所用到的是less-loader,css-loader,其中test表示制定文件的后缀名,use规定好什么格式的文件使用对应文件的loader。 

module.exports={
    entry:'./index',
    output:{
        path: __dirname+'/dist',
        filename: 'bundle.js'
    },
    module:{
        rules:[
        {test: /\.css$/, use: [ 'style-loader','css-loader']},
        {test: /\.less$/, use: [ 'style-loader','css-loader','less-loader']},
        ]
    }
}

接着,建立一个index.js的文件,输入如下代码,意思就是导入less文件,因为webpack是通过编译js 文件来提取css的:

import './less/common.less';
import './less/style.less';


完成之后,可以尝试在命令行工具中执行webpack,这个时候,你会发现webpack已经成功编译,生成dist文件夹,在文件夹下有编译出来的bundle.js,但是我们并没有看到编译出来的css文件。因为webpack已经把css样式编译到js文件里面去了,其中style-loader会把它生成style标签样式,引入到header里面。 虽然我们没有看到单独生成的样式文件,但是样式已经引入到页面中了。 

8.png

7.png

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

15

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?