配置进阶

Webpack配置Less进阶

前端页面自动刷新,Webpack配置Less的最终产品发布配置,和开发配置公用部分配置文件

2018-05-10侠课岛    中级进阶       

前端/前端必修/搭建Webpack编译Less环境 13     0     2645

之前的两节我们已经成功配置了webpack编译环境,实现了less的编译。这节我们来简单扩展一下webpack的功能,主要内容包括:

  • webpack热加载实现修改实时刷新 

  • webpack压缩css代码 

  • webpack构建生产环境和开发环境分离 

webpack热加载实现修改实时刷新 

通过webpack-dev-server可以实现修改后实时刷新,具体详情请看本站的其他教程。点我查看侠课岛webpack热加载教程 

webpack压缩css代码 

为什么要压缩css代码 

我们在开发的时候,css代码都是一个属性占据一行,这样方便修改和阅读。那对于一个项目来说,几千行的样式代码是很正常不过的事情。而经过压缩之后,去掉多余的空格和行数,能够很大程度减小文件的大小,优化页面加载速度。 

配置css压缩 

其实这个css压缩配置起来很简单的啦,因为我们之前使用的css-loader就有这个功能,所以我们只要loader里面设置optionsminimize选项设置为true,这样webpack在抽取样式,生成样式文件的时候,就会自动对它进行压缩。

14.png

那么除了minimize之外,css-loader还提供了其他的options选项,大家可以看下官方文档了解下其他选项的用法。点我去查看

19.png

测试压缩效果 

设置好webpack之后,我们来测试一下webpack有没有对样式文件进行压缩。首先在我们的less文件里面创建一些样式。

15.png

然后在命令行工具中执行webpack开始编译,编译完成之后,找到dist文件夹下面的css->common.css,可以看到文件已经是压缩过的格式啦~说明我们webpack已经成功压缩代码~

17.png
18.png

webpack生产环境和开发环境配置分离 

为什么要分离发布环境和开发环境配置 

生产环境就是我们在开发项目中所使用的环境,为了优化开发流程,减少开发时间,我们会加入很多自动化的工作流程配置,比如热加载自动刷新,css前缀自动补全等等。

发布环境就是发布到服务器之后,就不需要那些自动化的功能了,这时候就需要将文件进行压缩,提高文件加载的速度。

所以为了满足不同环境的需求,我们就需要将webpack的配置区分开来,在开发环境下使用开发配置,在发布的时候使用发布配置。 

配置webpack环境分离 

  • 首先我们要创建不同的配置文件。还是在之前的项目中,将根目录下面的webpack.config.js改成webpack.prod.config.js,这个文件做为发布环境的配置文件;拷贝一份,重新命名为webpack.dev.config.js,这个文件做为开发环境的配置文件;然后再创建一个文件,命名为webpack.base.config.js,这个文件做为公共的配置文件,承载开发环境和发布环境的相同配置,这样我们在修改一些公共的配置的时候,不用一段代码修改两次,维护起来更加方便。

    20.png 

  • 在配置之前,我们还需要下载一个官方插件——webpack-merge,用来合并公共配置和不同环境的配置文件,在命令行中执行npm install webpack-merge -d。通过这个插件,我们可以把公共配置和私有环境配置合并成一个完整的webpack配置文件。

    21.png

  • 在webpack.base.config.js中,我们声明一些项目的公共配置,比如编译的入口出口,文件打包等。 

 // webpack.base.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry: {
        index: './index',  //webpack编译入口文件
    },
    output: {
        path: __dirname+'/dist', //编译到当前目录
        filename: 'bundle.js'     //编译后的文件名字
    }
};
  • 在webpack.dev.config.js中,我们配置开发环境下的编译文件。因为需要跟公共的配置文件合并,所以我们需要在文件的开头引入公共的配置和webpack-merge。

为了方便测试,我们继续使用这节课的编译less代码做为分离配置。在开发环境中,我们不压缩代码,不分离css样式文件,只使用最开始的css-loader和less-loader,这样配置之后,webpack并不会生成样式,而是直接将样式以<style>形式引入到html中。 

//webpack.dev.config.js
const merge = require('webpack-merge');    //引入合并插件
const baseConfig = require('./webpack.base.config.js'); //引入公共配置
//使用merge来合并配置
module.exports = merge(baseConfig,{
    module:{
        rules:[
        {test: /\.css$/, use: [ 'style-loader','css-loader']},
        {test: /\.less$/, use: [ 'style-loader','css-loader','less-loader']},
        ]
    }
});
  • 在webpack.prod.config.js中,我们使用上节讲过的extract-text-webpack-plugin来抽离css文件以及压缩css。这里的代码都是之前讲解过的,这里就不多说了,直接拿过来用就好啦。 

const merge = require('webpack-merge');    //引入合并插件
const baseConfig = require('./webpack.base.config.js'); //引入公共配置
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');  //引入抽离css插件
const extractComm = new ExtractTextWebpackPlugin('css/common.css');
const extractStyle = new ExtractTextWebpackPlugin('css/style.css');
/**
* 编译less的公用函数配置
* @param obj
* @param test
* @returns {{test: *, use: *}}
*/
ssRuleComm = (obj, test)=> {
   return {
       test: test,
       use: obj.extract({
           fallback: "style-loader",
           use: [
            {
                loader: 'css-loader',
                options: {minimize:true}
            },
            "less-loader"
        ],
           allChunks: true
       })
   };
;
module.exports = merge(baseConfig,{
    module: {
  rules: [
cssRuleComm(extractComm,/common.less$/i),
cssRuleComm(extractStyle,/style.less$/i)
  ]
 },
 plugins: [
extractComm,extractStyle
 ]
});

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

评价

13

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

签到有礼

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

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

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

金币可以用来做什么?