之前的两节我们已经成功配置了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 ] });