webpack配置实践
首先我们的需求:
- 打包调试
- 提取公共代码
- 压缩
- 热替换
1.打包调试
第一步,我们在目标文件夹下安装webpack(假设已有package.json
)npm i webpack@ -g
cnpm i webpack@ --save-dev
(这里推荐大家安装稳定的2.x版本)
项目结构如图:
我们将编写的js代码和样式文件放置在app
文件夹内(正常项目开发需要js
文件和less
文件更规范的组织文件结构,此处仅为演示方便)。
第二步,我们在目标文件夹下新建webpack.config.js
module.exports = {
entry:{
main:__dirname + '/app/main.js',
},
output:{
path:__dirname + '/public',
filename:'[name].[id].js',//此格式写法后续会提到为什么
publicPath:'/public/'
}
}
我们已经完成了webpack最基础的部分:添加了文件的输入和输出。入口是app
文件夹内的main.js
文件,出口为public
文件夹。接下来我们来处理各种文件的解析,就是大名鼎鼎的loader
的舞台了。假设我们使用es6
和less
开发,那么我们需要:npm i babel-loader babel-core babel-preset-es2015 babel-preset-stage-0 --save-dev
npm i less less-loader css-loader style-loader --save-dev
接下来我们只需要在modules
字段下把这些loader
加进去:
module.exports = {
devtool:'cheap-module-eval-source-map',//多种选择,选择最适合自己的
entry:{
main:__dirname + '/app/main.js',
},
output:{
path:__dirname + '/public',
filename:'[name].[id].js',
publicPath:'/public/'
},
module:{
loaders:[
{
test:/\.js$/, //解析文件类型
exclude:/node_modules/, //排除node_modules文件
loader:'babel-loader', //使用哪种loader解析
query:{
presets:['es2015','stage-0']//loader的配置项,解析es6
}
},
{
test:/\.less$/,
exclude:/node_modules/,
loader:'style-loader!css-loader!less-loader'//顺序为从右向左
}
]
},
}
大功告成!
如果你在全局安装有webpack的话,可以在终端敲入webpack并回车,几秒钟后,main.js
文件已经在public
打包出来了!
之后我们在index.html
中引入main.0.js
文件,再打开index.html
就可以看到效果了。
以上步骤,我们已经实现了文件的打包调试,但是现在有个问题摆在我们面前:第三方库代码和业务代码打包到了同一个文件main.0.js
内,每次更新代码都要更新整个文件。那么接下来我们对代码进行拆分。
2.提取公共代码
引入CommonsChunkPlugin
插件,在webpack.config.js
添加如下内容:
module.exports = {
devtool:'cheap-module-eval-source-map',
entry:{
main:__dirname + '/app/main.js',
vendor:'moment'
},
output:{
path:__dirname + '/public',
filename:'[name].[id].js',
publicPath:'/public/'
},
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015','stage-0']
}
},
{
test:/\.less$/,
exclude:/node_modules/,
loader:'style-loader!css-loader!less-loader'
}
]
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
names:['vendor','manifest']
})
]
}
我们看到向插件的构造函数传入了两个参数vendor
和manifest
,以及我们在entry
也加入了新的入口moment
。moment
是常用的时间处理的第三方库,我们可以通过npm i moment --save-dev
进行安装。而entry
处的vendor
将成为output
字段filename
中[name]
的值,也就是说将打包出main.x.js
和vendor.x.js
两个文件,main.x.js
文件将保存我们的业务代码,vendor.x.js
将保存moment
的代码,这样我们将公共代码和业务代码进行了初步分离。
在新添加的CommonmChunkPlugin
插件中,我们添加了manifest
值,这是为什么呢?如果你不添加这个值,你在打包时会发现,main.x.js
有更新,vendor.x.js
还是有更新,并未真正实现"分离"。官方文档对此的解释是:
The issue here is that on every build, webpack generates some webpack runtime code, which helps webpack do it’s job. When there is a single bundle, the runtime code resides in it. But when multiple bundles are generated, the runtime code is extracted into the common module, here the vendor file.
大致的意思就是说,webpack每次编译时运行的代码会影响到hash
值的变化,当只有一个打包文件时这部分代码会塞进去,当有多个打包文件时,这部分代码会进入公共的vendor
。所以解决办法是使用manifest
字段把这部分代码从vendor
中作为一个公共模块抽出来,从而不会影响vendor
。
将以上的配置写入webpack.config.js
,运行webpack命令,我们发现业务代码和公共库代码成功分离,改写main.1.js
文件的内容,再次打包,发现vendor
文件并没有变化,成功!
当我们再进行打包时,发现又会多出了新的main.x.js
等文件,打包三次就会出现三个main.x.js
文件,此时该怎么办呢?我们可以使用clean-webpack-plugin
插件:
npm i clean-webpack-plugin --save-dev
然后在webpack.config.js
中引入:
var CleanWebpackPlugin = require('clean-webpack-plugin');
new CleanWebpackPlugin(
['public/main.*.js','public/manifest.*.js'],//要删除的文件目录匹配
{
root:__dirname,
verbose:true,
dry:false
}
),
这样我们每次在打包新的代码时,旧文件就会删除,不会再出现同一份文件存在多份的情况。
3.压缩
在webpack中,图片,css,js等等其他资源皆可压缩,本文仅以压缩js为例。
安装插件:npm i uglifyjs-webpack-plugin --save-dev
在webpack.config.js
中引入:
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
new UglifyJsPlugin({
beautify:true,
exclude:['/node_modules/'],
compress:{
warnings:false
},
output:{
comments:false
}
})
我们指定了压缩的方法,排除了不需要压缩的node_modules
部分,同时我们去除了comments
部分(comments
为@license等注释,是可观的压缩空间)。再次在终端输入打包命令,可见js打包后的体积有令人满意的减小。
4.热替换
webpack总是绕不开热替换的话题。热替换的功能配置和原理是一大话题,三天三夜也说不完,也并非本文重点,本文只提供简易高效的配置方法。
热替换存在两种使用方式,cli
和node
。cli
方式无需添加新的热替换插件,且无需在入口处添加webpack-dev-server
等入口,故本文采用cli
使用方式。
在webpack.config.js
中添加devServer
字段,加入如下代码:
devServer:{
inline:true,
hot:true
},
保存后运行webpack-dev-server --inline --hot --progress
,再修改下main.less
文件的样式,会发现浏览器并没有刷新,但页面已经发生了变化,我们的热替换功能也成功加入了!
tips:
在实际项目打包时,可以将filename
字段的值换为[name].[chunkhash].js
,其中[chunkhash]
为webpack每次打包后给每个模块的标识值,这个值每次打包后都会更换。为什么在此处我们使用[id]
呢,因为chunkhash
与热替换存在冲突,终端会有报错,那么使用id
可以算作一个解决方案。这就引申出另一话题,我们可以使用两套webpack配置分别用于生产环境和开发环境,通过webpack指定config来进行打包。例如我们在开发环境使用id
,在生产环境去掉热替换并使用hash
的方式。而且,一些压缩插件也没必要在开发环境过度使用,两套配置能让webpack发挥最大的威力。
另外,chunkhash
和hash
有区别,chunkhash
顾名思义是模块的标识,而hash
是webpack每次编译的标识值,不同的资源如js和css存在chunkhash
解耦的问题,此处不进行过多讨论。
关于热替换的更多细节和原理,参考文章:http://www.cnblogs.com/wonyun/p/7077296.html
5.运行
我们知道,每次打包后,都会有新的main.x.js
文件生成,其hash值每次打包后都会发生变化,难道我们的index.html
文件需要每次打包后都手动修改main.x.js
的路径吗?还好社区提供了html-webpack-plugin
插件,可以在已有html模板的条件下自动为我们生成带有最新代码的html文件:
npm i html-webpack-plugin --save-dev
在webpack.config.js
中引入:
var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
title:'demo',
template:'index.html'
}),
在终端运行打包命令,我们看到public
文件夹下生成了新的index.html
文件:
以后我们再进行调试时,以本文为例,则需要打开localhost:8080/public/index.html
,因为每次webpack的HtmlWebpackPlugin
都会把新的js文件加入到这个html文件内。在开发全部完成后,我们可以将js路径写死,添加到原有的index.html
文件中。
以下是我们webpack.config.js
全部的配置;
var webpack = require('webpack');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
devtool:'cheap-module-eval-source-map',
entry:{
main:__dirname + '/app/main.js',
vendor:'moment'
},
output:{
path:__dirname + '/public',
filename:'[name].[id].js',
publicPath:'/public/'
},
devServer:{
inline:true,
hot:true
},
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015','stage-0']
}
},
{
test:/\.less$/,
exclude:/node_modules/,
loader:'style-loader!css-loader!less-loader'
}
]
},
plugins:[
new CleanWebpackPlugin(
['public/main.*.js','public/manifest.*.js'],
{
root:__dirname,
verbose:true,
dry:false
}
),
new webpack.optimize.CommonsChunkPlugin({
names:['vendor','manifest']
}),
new HtmlWebpackPlugin({
title:'demo',
template:'index.html'
}),
new UglifyJsPlugin({
beautify:true,
exclude:['/node_modules/'],
compress:{
warnings:false
},
output:{
comments:false
}
})
]
}
整个项目,我们在app
文件下的main.js
内写业务代码,main.less
写样式,在public/index.html
下使用热替换进行调试,打包后的压缩文件在public
文件夹下,并且对业务代码,第三方代码进行了清晰地区分。
使用这份webpack配置,我们实现了:
- 工程的打包调试
- 公共代码提取,提高开发效率
- 资源压缩
- 热替换
webpack配置实践的更多相关文章
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- webpack配置详解
webpack配置详解 先点个赞吧,再挨个点下面的连接,觉得不值这个赞的回来骂我啊. Webpack傻瓜式指南(一) Webpack傻瓜指南(二)开发和部署技巧 Webpack傻瓜式指南 原生的官网详 ...
- Webpack配置示例和详细说明
/* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...
- 【转】Flume(NG)架构设计要点及配置实践
Flume(NG)架构设计要点及配置实践 Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中.由原来的Fl ...
- vue-cli#2.0 webpack 配置分析
目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...
- [转载] iptables配置实践
原文: http://wsgzao.github.io/post/iptables/ iptables配置实践 By wsgzao 发表于 2015-07-24 文章目录 1. 前言 2. 更新历史 ...
- Zookeeper、Solr和Tomcat安装配置实践
Zookeeper.Solr和Tomcat安装配置实践
- NTP配置实践
前言 NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议.不管是平时使用的私人计算机还是在工作中搭建的服务器集群.时间的统一性和准确性是十分 ...
随机推荐
- 一次dns缓存引发的慘案
时间2015年的某个周六凌晨5点,公司官方的QQ群实用户反馈官网打不开了,但有的用户反馈能够打开.客服爬起来自己用电脑试了一下没有问题,就给客户反馈说.可能是自己网络的问题,请过会在试试.早点8点,越 ...
- [转]SVN更新的时候前面字母的意思(U、G、A、R、C)
U:update 表示从服务器收到文件更新了 G:表示本地文件以及服务器文件都已更新,而且成功的合并了 其他的如下: A:added 表示有文件或者目录添加到工作目录 R:replace 表示文件或者 ...
- NFS 网络文件系统测试笔记
NFS(Network Files System),网络文件系统是1980年由SUN发展出来在UNIX&Linux系统间实现磁盘文件共享的一种方法.它是一种文件系统协议:支持应用程序在客户端通 ...
- ACE的源码划分
前几篇文章也提到过,ACE的所有源文件和头文件都杂乱堆在了ACE_wrappers/ace目录下.这样的代码组织方式给学习ACE带来了很大的困难,很多朋友在看到ace目录下庞大的代码的时候,几乎就失去 ...
- 转:高层游戏引擎——基于OGRE所实现的高层游戏引擎框架
高层游戏引擎——基于OGRE所实现的高层游戏引擎框架 这是意念自己的毕业论文,在一个具体的实践之中,意念主要负责的是物件和GUI之外的其他游戏系统.意念才学疏陋,望众位前辈不吝赐教.由于代码质量不高. ...
- 【MySQL】局域网内:在一台电脑访问另一台电脑的mysql数据库
1. 假设192.168.1.3为服务器2. 首先在ip为192.168.1.103的机子上能够ping 通运行->cmd>ping 192.168.1.3检查是否能ping通3. 把两台 ...
- MBProgressHUD 的类扩展方法用法
#import "MBProgressHUD.h" @interface MBProgressHUD (Add) + (void)showError:(NSString *)err ...
- 修改主键id为自增
详见:sqlserver修改主键为自增 先删除id字段, 执行下面sql即可: alter table sms_rec add id int IDENTITY (1,1) PRIMARY KEY
- 不让复制是不可能的----js获取选中文字
在360百科.知乎上经常会遇见禁止复制文本的情形,这能挡住一部分人复制,却挡不住程序员的复制. HTML都给我了,难道一小段文本我都拿不下来吗? F12打开控制台,然后选中文本,在控制台下粘贴以下代码 ...
- 常用Raspberry Pi周边传感器的使用教程(转)
转:http://bbs.xiaomi.cn/thread-7797152-1-1.html 在Raspberry Pi 的使用和开发过程中,你可能时常需要一些硬件和传感器等来支持你的开发工作,例如, ...