之前的两节我们已经成功配置了webpack编译环境，实现了less的编译。这节我们来简单扩展一下webpack的功能，主要内容包括：
webpack热加载实现修改实时刷新
webpack压缩css代码
webpack构建生产环境和开发环境分离
webpack热加载实现修改实时刷新
通过webpack-dev-server可以实现修改后实时刷新，具体详情请看本站的其他教程。点我查看侠课岛webpack热加载教程
webpack压缩css代码
为什么要压缩css代码
我们在开发的时候，css代码都是一个属性占据一行，这样方便修改和阅读。那对于一个项目来说，几千行的样式代码是很正常不过的事情。而经过压缩之后，去掉多余的空格和行数，能够很大程度减小文件的大小，优化页面加载速度。
配置css压缩
其实这个css压缩配置起来很简单的啦，因为我们之前使用的css-loader就有这个功能，所以我们只要loader里面设置options把minimize选项设置为true，这样webpack在抽取样式，生成样式文件的时候，就会自动对它进行压缩。
那么除了minimize之外，css-loader还提供了其他的options选项，大家可以看下官方文档了解下其他选项的用法。点我去查看
测试压缩效果
设置好webpack之后，我们来测试一下webpack有没有对样式文件进行压缩。首先在我们的less文件里面创建一些样式。
然后在命令行工具中执行webpack开始编译，编译完成之后，找到dist文件夹下面的css->common.css，可以看到文件已经是压缩过的格式啦~说明我们webpack已经成功压缩代码~
webpack生产环境和开发环境配置分离
为什么要分离发布环境和开发环境配置
生产环境就是我们在开发项目中所使用的环境，为了优化开发流程，减少开发时间，我们会加入很多自动化的工作流程配置，比如热加载自动刷新，css前缀自动补全等等。
发布环境就是发布到服务器之后，就不需要那些自动化的功能了，这时候就需要将文件进行压缩，提高文件加载的速度。
所以为了满足不同环境的需求，我们就需要将webpack的配置区分开来，在开发环境下使用开发配置，在发布的时候使用发布配置。
配置webpack环境分离
首先我们要创建不同的配置文件。还是在之前的项目中，将根目录下面的webpack.config.js改成webpack.prod.config.js，这个文件做为发布环境的配置文件；拷贝一份，重新命名为webpack.dev.config.js，这个文件做为开发环境的配置文件；然后再创建一个文件，命名为webpack.base.config.js，这个文件做为公共的配置文件，承载开发环境和发布环境的相同配置，这样我们在修改一些公共的配置的时候，不用一段代码修改两次，维护起来更加方便。
在配置之前,我们还需要下载一个官方插件——webpack-merge，用来合并公共配置和不同环境的配置文件，在命令行中执行npm install webpack-merge -d。通过这个插件，我们可以把公共配置和私有环境配置合并成一个完整的webpack配置文件。
在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
]
});
