&&&&大水淹了江城，被迫进行了今年第二次封闭式开发；远离公司，不胜唏嘘，幻化成大雨，远方的人啊，愿你能出现在我梦里；靠！码农哪有时间做梦啊，倒床上就着了，眼睛一睁，又要继续码了。。。&&&&做前端一年多了，睡前反省反省后发现：工作以html、css、js、jquery为主，伴有少量（HTML5、CSS3）；业余入门级Angular、React、ES6、Nodejs、自动化；那一晚，我又失眠了，为嘛牛逼的，我都只是入门级；想想我那小站点又是一个多月没更新了，技术面又窄，未来在哪里？宝宝心里苦啊；痛定思痛后，只有业余扣点时间用React和ES6改写小站的后台了，是的，博客战场模式又要开启了！&&&&React：仅仅是UI、虚拟DOM、数据流；无疑是前端组件式开发的利器，太强大了，大家都知道，我什么都没说；我只知道我喜欢React就一个原因：我喜欢这种优雅的代码风格；为什么这么多人喜欢杨钰莹，因为总有人诗一般的活着！&&&&去年试水React的时候，感觉还挺容易上手，这次一玩，才发现，不会点ES6不行啊，不会点Nodejs玩不起来啊！之前用Grunt、Gulp打包css、js，如今webpack霸屏了，什么都干，你懂的！话说用了webpack后我就真的相信webpack是最好的了；随便两行代码，webpack不uglify后就是700K，如果你像我一样傻，每次重启webpack，打包一次就相当于进入一次广告时间，你可以上趟厕所，整点吃的，喝的，凉快凉快；好吧，watch就不用每次等广告时间了；可能这些只是属于新手的抓狂吧；&&&&如果你也是新手，如果你也为React、Angular、Nodejs这些牛逼的技术抓狂过，其实没关系，想想那些奇葩 &需求，有时恨不得让你改框架源码的时候；再想想，其实技术本身并不难。。。&&&&1、webpack小觑&&&&webpack大而全，和静态资源相关的所有它都能干涉，当然，还能启动server；webpack主要以loaders和plugins处理各种静态资源；&&&&loaders：&&&&在React里会用到JSX、ES6、js，我统一将文件后缀使用.js，便于babel的配置：想将css独立出来的话：处理图片：多个loader通过！区分，同时接受查询参数以？连接，类似于用！区分多个url，比如：loader1?name=[name]-[hash].[ext]&limit=10000!loader2?xxx=xx；可以使用require语句加载loader，也可以通过配置中的正则表达式来绑定loader；plugins：我首先看重了html-webpack-plugin和assets-webpack-plugin还有上面的extract-text-webpack-plugin，因为牵扯到我挺感兴趣的一块：前后端的分离及自动化；html-webpack-plugin会由entry的配置将入口文件所属的html文件作为模板，重新生成一个html文件，其中的静态资源都已根据配置打包好，貌似很不错哦！不过有两个问题，还没解决：（1）、如果静态资源和主站是各自独立的站点，而将html作为静态资源对待的话，主站有路由相关配置的话，好像有点扯不开了；要是只在本地开发这样配置，各自独立上线的话，跨域时本地不便于测试；（2）、页面上的图片路径没做处理，可能要求有点多了。。。（3）、将html作为模板对待了，那么如何include其他模板；由于这三个原因，暂时不敢说html-webpack-plugin很适用，特别是第一点；继续探索中。使用webpack后，对文件的版本hash将变得非常简单：出口文件的name加上[hash]即可；可能现在来说，清除静态资源缓存最好的做法就是文件名hash了，注意不是加个后缀可以的；对于流量非常高的站点，即使等到三更半夜上线，如果仅仅加个后缀清缓存的话，也难免会出事，因为页面和静态资源同步时会有时间差，而在这个间隙有用户访问的话，页面出错的可能性就很大了；而文件名hash的方式就能很好的避免这个问题，由于每次改动后生成的文件名都不一样，上线并不是覆盖之前的版本，只是多了一个版本的文件，再上页面文件即使同步有时间差，要么访问旧版页面和旧版资源，要么访问新版页面新版资源，就不存在冲突了，这样服务器可以大胆的对静态资源开启永久强缓存，并且有利于回滚；至于静态资源由此产生的积压，交给运维处理吧！使用html-webpack-plugin能很好的配合文件名hash，基于上面的小问题。。。现在生成文件名hash很简单了，怎么对应页面一起改呢？（1）、自己动手慢慢改去吧（2）、页面由前端输出：生成map.json，根据这个配置读文件对应改资源引用的路径（3）、页面由后端输出：生成map.json，后端读这个配置动态加载页面引用的资源路径总之，就是要生成map.json，这里就简化了很多，因为不用管文件依赖了，webpack已将依赖文件打包到主文件里了；接下来就是读这个配置文件了，我也不知道，再探！。。。由assets-webpack-plugin生成map.json：map.json大概这样：{&entry1&:{&js&:&app-ed03f4fe.js&,&css&:&app-6f7f3cda3d230d8fa897.css&}}2、React、ES6小觑配置好了webpack之后，开始React+ES6就不是什么难事了，除了以后会引进的Redux、Flux、Reflux会不好理解外，接下来可以一边React一边ES6了，慢慢来，两不误！说真的，修改state的时候太多了，所以熟悉React后引入Redux是很有必要的；React里使用JSX语法，不用管了，babel编译；React里使用ES6，尽管用，babel帮你打到ES5；上面不是已配好webpack吗？babel-loader就是帮你干这个的；不过启动webpack时记得watch哦，不然得像我一样老是等广告时间；不说Hello,world!无论Angular还是React都提供了一种方式来实现组件化的开发，来扩展HTML标签的不足，这些组件更像是一种描述性的语言，对，可以非常语义化，比如：要一个3行5列的列表，&TableList rows=3 cols=5 data={TableDatas}/&；这样一个列表就出来了，是不是很爽！React仅仅是UI，我认为它是为组件化而生的，而且跨平台，跨终端；我所想象的组件化是html标签已封装，css、js各自独立；当然要把对应组件的css也一起封装也是完全可以的，为什么要把css也独立呢？我们会用grunt-sass-contrib、gulp-sass、sass-loader，而这些工具已提供了对sass模块化很好的解决方法，比如sass的依赖有loadPath；而我们要做的就是像模块化js一样模块化css，然后在js里require或import该组件所需的css模块即可，因为我要的是用到多少css就加载多少css，最少化的重复，而如果一个组件对应一套css，就很难避免重用了，最后通过上述工具直接打包的css就是你页面所需的了；我看到了React可以这么做，封装html、扩展标签，封装成组件，组件依赖css模块和js模块；比如登录界面：components是Web的未来，而现在是React！components一直吸引着无数前端的探索，以上只是个人初步理解，抛砖引玉，还在探索中。话说部分浏览器已实现了Web components，或许这只是颗启明星，指引着我们走向更美好的未来！个人博客：花满楼 前端那些事(gh_a588bee57c6c)　
　文章为作者独立观点，不代表大不六文章网立场
gh_a588bee57c6c最有影响力的前端程序员的自媒体，关注前端攻城狮话题:前端主流技术,前端职场,前端圈子,在线课程，学习资源等热门文章最新文章gh_a588bee57c6c最有影响力的前端程序员的自媒体，关注前端攻城狮话题:前端主流技术,前端职场,前端圈子,在线课程，学习资源等&&&&违法和不良信息举报电话：183-
举报邮箱：
Copyright(C)2016 大不六文章网
京公网安备78WebPack常用功能介绍
WebPack常用功能介绍
Webpack是一款用户打包前端模块的工具。主要是用来打包在端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、font file、template等。个人认为它的优点就是易用，而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求。这里就尽量详细的来介绍下一些基本功能的使用。
npm install webpack
运行webpack
webpack需要编写一个config文件，然后根据这个文件来执行需要的打包功能。我们现在来编写一个最简单的config。新建一个文件，命名为webpack-config.js。config文件实际上就是一个Commonjs的模块。内容如下：
var webpack = require(&webpack&);
var path = require(&path&);
var buildPath = path.resolve(__dirname,&build&);
var nodemodulesPath = path.resolve(__dirname,&node_modules&);
var config = {
//入口文件配置
entry:path.resolve(__dirname,&src/main.js&)，
extentions:[&&,&js&]//当requrie的模块找不到时，添加这些后缀
//文件导出的配置
path:buildPath,
filename:&app.js&
module.exports =
我的目录结构是这样的：
|&index.html
|&webpack-config.js
main.js文件内容如下：
var a = require(&./js/a&);
console.log(&hello world&);
document.getElementById(&container&).innerHTML = &
hello world
a.js文件内容如下：
module.exports = function(){
console.log(&it is a &);
然后我们执行如下的命令：
webpack &config webpack-config.js &colors
这样我们就能在目录里面看到一个新生成的目录build，目录结构如下：
|&index.html
|&webpack-config.js
然后引用app.js就Ok啦。main.js和模块a.js的内容就都打包到app.js中了。这就演示了一个最简单的把模块的js打包到一个文件的过程了。
介绍webpack config文件
webpack是根据config里面描述的内容对一个项目进行打包的。接着我们来解释下config文件中的节点分别代表什么意思。一个config文件，基本都是由以下几个配置项组成的。
配置要打包的文件的入口;可以配置多个入口文件，下面会有介绍。
配置文件后缀名，除了js，还有jsx、coffee等等。除了这个功能还可以配置其他有用的功能，由于我还不完全了解，有知道的朋友欢迎指教。
配置输出文件的路径，文件名等。
module(loaders)
配置要使用的loader。对文件进行一些相应的处理。比如babel-loader可以把es6的文件转换成es5。大部分的对文件的处理的功能都是通过loader实现的。loader就相当于gulp里的task。loader可以用来处理在入口文件中require的和其他方式引用进来的文件。loader一般是一个独立的node模块，要单独安装。
loader配置项：
test: /.(js|jsx)$/,//注意是正则表达式，不要加引号，匹配要处理的文件
loader: &eslint-loader&,//要使用的loader，&-loader&可以省略
include: [path.resolve(__dirname, &src/app&)],//把要处理的目录包括进来
exclude: [nodeModulesPath]//排除不处理的目录
目前已有的loader列表：
https://webpack.github.io/docs/list-of-loaders.html
一个module的例子:
preLoaders: [
test: /.(js|jsx)/,
loader:&eslint-loader&,
include:[path.resolve(__dirname,&src/app&)],
exclude:[nodeModulesPath]
test:/.(js|jsx)/, //正则表达式匹配 .js 和 .jsx 文件
loader: &babel-loader?optional=runtime&stage=0&,//对匹配的文件进行处理的loader
exclude: [nodeModulesPath]//排除node module中的文件
顾名思义，就是配置要使用的插件。不过plugin和loader有什么差别还有待研究。
来看一个使用plugin的例子：
plugins: [
//压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
//允许错误不打断程序
new webpack.NoErrorsPlugin(),
//把指定文件夹xia的文件复制到指定的目录
new TransferWebpackPlugin([
{from: &www&}
], path.resolve(__dirname,&src&))
目前已有的plugins列表：
http://webpack.github.io/docs/list-of-plugins.html
如何压缩输出的文件
plugins: [
//压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
如何copy目录下的文件到输出目录
copy文件需要通过插件&transfer-webpack-plugin&来完成。
npm install transfer-webpack-plugin -save
var TransferWebpackPlugin = require(&transfer-webpack-plugin&);
//其他节点省略
plugins: [
//把指定文件夹下的文件复制到指定的目录
new TransferWebpackPlugin([
{from: &www&}
], path.resolve(__dirname,&src&))
打包javascript模块
支持的js模块化方案包括：
import MyModule from &./MyModule.js&;
var MyModule = require(&./MyModule.js&);
define([&./MyModule.js&], function (MyModule) {});
上面已经演示了打包js模块,这里不再重复。ES6的模块需要配置babel-loader来先把处理一下js文件。下面展示下打包ES模块的配置文件:
var webpack = require(&webpack&);
var path = require(&path&);
var buildPath = path.resolve(__dirname, &build&);
var nodeModulesPath = path.resolve(__dirname, &node_modules&);
var TransferWebpackPlugin = require(&transfer-webpack-plugin&);
var config = {
entry: [path.join(__dirname, &src/main.js&)],
resolve: {
extensions: [&&, &.js&, &.jsx&]
//node_modules: [&web_modules&, &node_modules&] (Default Settings)
path: buildPath,
filename: &app.js&
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
new webpack.NoErrorsPlugin(),
new TransferWebpackPlugin([
{from: &www&}
], path.resolve(__dirname,&src&))
preLoaders: [
test: /.(js|jsx)/,
loader:&eslint-loader&,
include:[path.resolve(__dirname,&src/app&)],
exclude:[nodeModulesPath]
test:/.js/, //注意是正则表达式，不要加引号
loader: &babel-loader?optional=runtime&stage=0&,//babel模块相关的功能请自查，这里不做介绍
exclude: [nodeModulesPath]
//Eslint config
configFile: &.eslintrc& //Rules for eslint
module.exports =
打包静态资源
css/sass/less
安装css-loader和style-loader
npm install css-loader &save -dev
npm install style-loader &save -dev
config配置：
var config = {
entry:path.resolve(__dirname,&src/main.js&),
extentions:[&&,&js&]
path:buildPath,
filename:&app.js&
loaders:[{
test:/.css$/,
loader:&style!css&,
exclude:nodemodulesPath
style-loader会把css文件嵌入到html的style标签里，css-loader会把css按字符串导出，这两个基本都是组合使用的。打包完成的文件，引用执行后，会发现css的内容都插入到了head里的一个style标签里。如果是sass或less配置方式与上面类似。
可以通过url-loader把较小的图片转换成base64的字符串内嵌在生成的文件里。安装：
npm install url-loader &save -dev
config配置:
var config = {
entry:path.resolve(__dirname,&src/main.js&),
extentions:[&&,&js&]
path:buildPath,
filename:&app.js&
loaders:[{
test:/.css/,
loader:&style!css&,//
exclude:nodemodulesPath
{test:/.png/,loader:&url-loader?limit=10000&}//限制大小小于10k的
css文件内容：
container{
color: #f00;
background:url(images/logo-201305.png);
/*生成完图片会被处理成base64的字符串 注意：不要写'/images/logo-201305.png',否则图片不被处理*/
内嵌iconfont的使用方法其实和上述处理png图片的方法一致。通过url-loader来处理。
config配置：
var config = {
entry:path.resolve(__dirname,&src/main.js&),
extentions:[&&,&js&]
path:buildPath,
filename:&app.js&
loaders:[{
test:/.css/,
loader:&style!css&,//
exclude:nodemodulesPath
{test:/.(png|woff|svg|ttf|eot)/,loader:&url-loader?limit=10000&}//限制大小小于10k的
css文件内容：
@font-face {font-family: &iconfont&;
src: url(&fonts/iconfont.eot&); /* IE9*/
src: url(&fonts/iconfont.eot?#iefix&) format(&embedded-opentype&), /* IE6-IE8 */
url(&fonts/iconfont.woff&) format(&woff&), /* chrome、firefox */
url(&fonts/iconfont.ttf&) format(&truetype&), /* chrome、firefox、opera、Safari, , iOS 4.2+*/
url(&fonts/iconfont.svg#iconfont&) format(&svg&); /* iOS 4.1- */
执行打包后会把字体文件都转换成base64字符串内容到文件里.这里有个头疼的问题，就是每个浏览器支持的字体格式不一样，由于把全部格式的字体打包进去，造成不必要的资源浪费。
打包template
我一大包handlebars的模块为例，来演示下打包模块的过程。有的模板对应的loader，有可能没有现车的，恐怕要自己实现loader。
先安装必须的node模块
npm install handlebars-loader &save -dev
npm install handlebars -save//是必须的
config配置:
var config = {
entry:path.resolve(__dirname,&src/main.js&),
extentions:[&&,&js&]
path:buildPath,
filename:&app.js&
{ test: /.html$/, loader: &handlebars-loader& }
新建一个模板文件tb.html，目录结构：
|&index.html
|&webpack-config.js
|&template
| |&tb.html
main.js中调用模块的代码如下：
var template = require(&./template/tp.html&);
var data={say_hello:&it is handlebars&};
var html = template(data);
document.getElementById(&tmpl_container&).innerHTML =
公用的模块分开打包
这需要通过插件&CommonsChunkPlugin&来实现。这个插件不需要安装，因为webpack已经把他包含进去了。接着我们来看配置文件：
var config = {
entry:{app:path.resolve(__dirname,&src/main.js&),
vendor: [&./src/js/common&]},//【1】注意这里
extentions:[&&,&js&]
path:buildPath,
filename:&app.js&
loaders:[{
test:/.css$/,
loader:&style!css&,
exclude:nodemodulesPath
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
//【2】注意这里 这两个地方市用来配置common.js模块单独打包的
new monsChunkPlugin({
name: &vendor&,//和上面配置的入口对应
filename: &vendor.js&//导出的文件的名称
目录结构现在是这样的：
|&index.html
|&webpack-config.js
|&a.js //a里面require了common
|&common.js
执行webpack会生成app.js和common.js两个文件.
config配置：
var config = {
m1:path.resolve(__dirname,&src/main.js&),
m2:path.resolve(__dirname,&src/main1.js&)
},//注意在这里添加文件的入口
extentions:[&&,&js&]
path:buildPath,
filename:&[name].js&//注意这里使用了name变量
webpack-dev-server
在开发的过程中个，我们肯定不希望，每次修改完都手动执行webpack命令来调试程序。所以我们可以用webpack-dev-server这个模块来取代烦人的执行命令。它会监听文件，在文件修改后，自动编译、刷新浏览器的页面。另外，编译的结果是保存在内存中的，而不是实体的文件，所以是看不到的，因为这样会编译的更快。它就想到与一个轻量的express服务器。安装：
npm install webpack-dev-server &save -dev
config配置：
var config = {
entry:path.resolve(__dirname,&src/main.js&),
extentions:[&&,&js&]
//Server Configuration options
devServer:{
contentBase: &, //静态资源的目录 相对路径,相对于当前路径 默认为当前config所在的目录
devtool: &eval&,
hot: true, //自动刷新
inline: true,
port: 3005
devtool: &eval&,
path:buildPath,
filename:&app.js&
new webpack.HotModuleReplacementPlugin(),//这个好像也是必须的，虽然我还没搞懂它的作用
new webpack.NoErrorsPlugin()
我的目录结构:
|&index.html
|&webpack-config.js//我把静态资源目录配置在了这里
|&common.js
执行命令：
webpack-dev-server &config webpack-dev-config.js &inline &colors
默认访问地址： http://localhost :3000/index.html(根据配置会不一样)
有一点需要声明，在index.html（引用导出结果的html文件）里直接引用&app.js&，不要加父级目录,因为此时app.js在内存里与output配置的目录无关：
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'更多公众号：gh_24b9dae85adf滴滴前端技术分享 - 推荐国内外前沿、优秀的技术内容，包含 Nodejs、工程自动化、编译器、新技术方向等最新文章相关作者文章搜狗：感谢您阅读[webpack]devtool里的7种SourceMap模式是什么鬼？，本文由网友投稿产生，如果侵犯了您的相关权益，请联系管理员。}