中国领先的IT技术网站
51CTO旗下网站
如何打造一个令人愉悦的前端开发环境（二）
这篇文章主要讲目前火热的打包构建方式--Webpack的使用方式。其实Webpack的入门指导文章非常多，配置方式也各有各样，如果不知道Webpack是什么或者不是很清楚各项配置含义的开发者，可以先看叶大神的入门级指南--Webpack 入门指迷。
作者：乖小鬼YQ来源：| 17:09
上一篇文章介绍了目前前端比较流行的各种编辑器，以及各种流行的打包方式，最后给了一个Gulp的例子，这个例子还是14年的时候写的，还有一些可以优化的空间，就不讨论了，这篇文章主要讲目前火热的打包构建方式--Webpack的使用方式。
主菜--没有开胃汤
其实Webpack的入门指导文章非常多，配置方式也各有各样，这里我推荐题叶大神的入门级指南--Webpack
入门指迷，如果不知道Webpack是什么或者不是很清楚各项配置含义的开发者，可以看此文章扫扫盲。毕竟我这篇文章并不是特别基础。
一、base.js
var&path&=&require('path')&var&baseConfig&=&{&&&&&resolve:&{&&&&&&&&&extensions:&['',&'.js'],&&&&&&&&&fallback:&[path.join(__dirname,&'../node_modules')],&&&&&&&&&alias:&{&&&&&&&&&&&&&'src':&path.resolve(__dirname,&'../src'),&&&&&&&&&&&&&'assets':&path.resolve(__dirname,&'../src/assets'),&&&&&&&&&&&&&'components':&path.resolve(__dirname,&'../src/components')&&&&&&&&&}&&&&&},&&&&&module:&{&&&&&&&&&loaders:&[{&&&&&&&&&&&&&test:&/\.js$/,&&&&&&&&&&&&&loader:&'babel',&&&&&&&&&&&&&exclude:&/node_modules/&&&&&&&&&},&{&&&&&&&&&&&&&test:&/\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/,&&&&&&&&&&&&&loader:&'url?limit=8192&context=client&name=[path][name].[hash:7].[ext]'&&&&&&&&&},&&&&&&&&&{&&&&&&&&&&&&&test:&/\.css$/,&&&&&&&&&&&&&loader:&'style!css!autoprefixer',&&&&&&&&&},&&&&&&&&&{&&&&&&&&&&&&&test:&/\.scss$/,&&&&&&&&&&&&&loader:&'style!css!autoprefixer!sass'&&&&&&&&&}]&&&&&}&};&&module.exports&=&baseC&
解读下这个基本配置：
1、resolve 解析模块依赖的时候，受影响的配置项。
extensions 决定了哪些文件后缀在引用的时候可以省略点，Webpack帮助你补全名称。
fallback 当webpack在 root(默认当前文件夹，配置时要绝对路径) 和
modulesDirectories(默认当前文件夹，相对路径)配置下面找不到相关modules，去哪个文件夹下找modules
这个大家应该比较熟悉，requirejs之类的都有，就是别名，帮助你快速指向文件路径，少写不少代码，而且不用关心层级关系，需要注意的是：在scss之类的css预编译中引用要加上~，以便于让loader识别是别名引用路径。
解析不同文件使用哪些loader，这个比较简单，很多文章都有，就不多说了，注意的是，这里的scss可以换成你自己的预编译器，例如：sass、less、stylus等，或者直接用postcss都行，当然还可以用一种通用方法，后面补上。
二、开发环境配置--config
var&webpack&=&require('webpack');&var&path&=&require('path')&var&merge&=&require('webpack-merge')&var&baseConfig&=&require('./webpack.base')&var&getEntries&=&require('./getEntries')&&var&hotMiddlewareScript&=&'webpack-hot-middleware/client?reload=true';&&var&assetsInsert&=&require('./assetsInsert')&&module.exports&=&merge(baseConfig,&{&&&entry:&getEntries(hotMiddlewareScript),&&&devtool:&'#eval-source-map',&&&output:&{&&&&&filename:&'./[name].[hash].js',&&&&&path:&path.resolve('./dist'),&&&&&publicPath:'./dist'&&&},&&&plugins:&[&&&&&new&webpack.DefinePlugin({&&&&&&&'process.env':&{&&&&&&&&&NODE_ENV:&'&development&'&&&&&&&}&&&&&}),&&&&&new&webpack.optimize.OccurenceOrderPlugin(),&&&&&new&webpack.HotModuleReplacementPlugin(),&&&&&new&webpack.NoErrorsPlugin(),&&&&&new&assetsInsert()&&&]&})&
说说这个配置中的一些难点：
1、getEntries 是用来配置入口文件，一般很多人是自己手写，或者SPA页面，只有一个入口，
很容易就写出来，但是公司中，很多情况，是需要多入口，也就是多路由的Url，这个时候入口的配置就比较麻烦，我这里是放单独一个文件里面配置，我们公司是靠规定来执行，也就是一个文件夹所有的main.js都认为是入口文件，其他都忽略。
function&getEntry(hotMiddlewareScript)&{&&&&&var&pattern&=&paths.dev.js&+&'project/**/main.js';&&&&&var&array&=&glob.sync(pattern);&&&&&var&newObj&=&{};&&&&&&array.map(function(el){&&&&&&&&&var&reg&=&new&RegExp('project/(.*)/main.js','g');&&&&&&&&&reg.test(el);&&&&&&&&&if&(hotMiddlewareScript)&{&&&&&&&&&&&&&newObj[RegExp.$1]&=&[el,&hotMiddlewareScript];&&&&&&&&&}&else&{&&&&&&&&&&&&&newObj[RegExp.$1]&=&&&&&&&&&&}&&&&&});&&&&&return&newO&}&
2、assetsInsert 是用来做模板替换的，一个小插件把template里面的值替换成打包后的css或者js。
三、打包环境配置--production
var&webpack&=&require('webpack');&var&path&=&require('path')&var&merge&=&require('webpack-merge')&var&baseConfig&=&require('./webpack.base')&var&getEntries&=&require('./getEntries')&var&ExtractTextPlugin&=&require('extract-text-webpack-plugin');&var&assetsInsert&=&require('./assetsInsert')&&var&productionConf&=&merge(baseConfig,&{&&&&&entry:&getEntries(),&&&&&output:&{&&&&&&&&&filename:&'./[name].[hash].js',&&&&&&&&&path:&path.resolve('./public/dist'),&&&&&&&&&publicPath:&'./'&&&&&},&&&&&plugins:&[&&&&&&&&&new&webpack.DefinePlugin({&&&&&&&&&&&&&'process.env':&{&&&&&&&&&&&&&&&&&NODE_ENV:&'&production&'&&&&&&&&&&&&&}&&&&&&&&&}),&&&&&&&&&new&ExtractTextPlugin('./[name].[hash].css',&{&&&&&&&&&&&&&allChunks:&true&&&&&&&&&}),&&&&&&&&&new&webpack.optimize.UglifyJsPlugin({&&&&&&&&&&&&&compress:&{&&&&&&&&&&&&&&&&&warnings:&false&&&&&&&&&&&&&}&&&&&&&&&}),&&&&&&&&&new&webpack.optimize.OccurenceOrderPlugin(),&&&&&&&&&new&assetsInsert()&&&&&]&})&&productionConf.module.loaders&=&[&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&test:&/\.js$/,&&&&&&&&&&&&&&&&&loader:&'babel',&&&&&&&&&&&&&&&&&exclude:&/node_modules/&&&&&&&&&&&&&},&{&&&&&&&&&&&&&&&&&test:&/\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/,&&&&&&&&&&&&&&&&&loader:&'url?limit=8192&context=client&name=[path][name].[hash:7].[ext]'&&&&&&&&&&&&&},&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&test:&/\.css$/,&&&&&&&&&&&&&&&&&loader:&ExtractTextPlugin.extract('style',&'css'),&&&&&&&&&&&&&},&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&test:&/\.scss$/,&&&&&&&&&&&&&&&&&loader:&ExtractTextPlugin.extract('style',&'css!sass')&&&&&&&&&&&&&}]&&module.exports&=&productionConf&
基本跟开发的差不多，差别在于：
1、使用ExtractTextPlugin 来打包css，所以要干掉原来base的loaders，重新写了一个，在最下面。
2、UglifyJsPlugin 给js压缩代码。其他没有什么好解释的了，一样的。
四、构建命令
require('shelljs/global')&env.NODE_ENV&=&'production'&var&ora&=&require('ora')&var&webpack&=&require('webpack')&var&webpackConfig&=&require('./webpack.production.config')&&var&spinner&=&ora('building&for&production...')&spinner.start()&&var&staticPath&=&__dirname&+&'/../public/dist/'&rm('-rf',&staticPath)&mkdir('-p',&staticPath)&&webpack(webpackConfig,&function&(err,&stats)&{&&&spinner.stop()&&&if&(err)&throw&err&&&process.stdout.write(stats.toString({&&&&&colors:&true,&&&&&modules:&false,&&&&&children:&false,&&&&&chunks:&false,&&&&&chunkModules:&false&&&})&+&'\n')&})&
写一个build.js，然后在package.json里面添加 script 参数
&build&:&&node&build.js&//这里记得写自己build.js路径&
甜点(马卡龙)--有点腻
上面的配置是可以更改的，例如你在loaders 里面加上
{&&&test:&/\.vue$/,&&&loader:&'vue'&}&
就可以变成支持.vue文件的vuejs打包构建，同理，修改下支持jsx，和添加一些reactjs的module，就可以用来跑Reactjs的东西。
还有可以随意更改Css预编译器的类型，用你自己喜欢就行，或者跟我们前面提到的方法，把所有类型都配置上，
var&path&=&require('path')&var&config&=&require('../config')&var&ExtractTextPlugin&=&require('extract-text-webpack-plugin')&&exports.assetsPath&=&function&(_path)&{&&&return&path.posix.join(config.build.assetsSubDirectory,&_path)&}&&exports.cssLoaders&=&function&(options)&{&&&options&=&options&||&{}&&&//&generate&loader&string&to&be&used&with&extract&text&plugin&&&function&generateLoaders&(loaders)&{&&&&&var&sourceLoader&=&loaders.map(function&(loader)&{&&&&&&&var&extraParamChar&&&&&&&if&(/\?/.test(loader))&{&&&&&&&&&loader&=&loader.replace(/\?/,&'-loader?')&&&&&&&&&extraParamChar&=&'&'&&&&&&&}&else&{&&&&&&&&&loader&=&loader&+&'-loader'&&&&&&&&&extraParamChar&=&'?'&&&&&&&}&&&&&&&return&loader&+&(options.sourceMap&?&extraParamChar&+&'sourceMap'&:&'')&&&&&}).join('!')&&&&&&if&(options.extract)&{&&&&&&&return&ExtractTextPlugin.extract('vue-style-loader',&sourceLoader)&&&&&}&else&{&&&&&&&return&['vue-style-loader',&sourceLoader].join('!')&&&&&}&&&}&&&&//&http://vuejs.github.io/vue-loader/configurations/extract-css.html&&&return&{&&&&&css:&generateLoaders(['css']),&&&&&postcss:&generateLoaders(['css']),&&&&&less:&generateLoaders(['css',&'less']),&&&&&sass:&generateLoaders(['css',&'sass?indentedSyntax']),&&&&&scss:&generateLoaders(['css',&'sass']),&&&&&stylus:&generateLoaders(['css',&'stylus']),&&&&&styl:&generateLoaders(['css',&'stylus'])&&&}&}&&//&Generate&loaders&for&standalone&style&files&(outside&of&.vue)&exports.styleLoaders&=&function&(options)&{&&&var&output&=&[]&&&var&loaders&=&exports.cssLoaders(options)&&&for&(var&extension&in&loaders)&{&&&&&var&loader&=&loaders[extension]&&&&&output.push({&&&&&&&test:&new&RegExp('\\.'&+&extension&+&'$'),&&&&&&&loader:&loader&&&&&})&&&}&&&return&output&}&
这就是把所有的css预编译的都加到配置里面了。
总结下--买单啦
Webpack多种多样，就算一个loaders都有好几种不同的配置，让人很是头疼，最关键的是很多插件自己的文档也不清不楚，弄得大家都很迷茫，我的经验就是多试多测，自己多写一写，看命令行打印的错误，去找原因，不要一看到报错就慌了，很多新手最容易犯错就是一看到报错就怀疑人生了，一定要看报错记录，一般都有提示，按照提示去解决相应问题就好啦。
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
热点热点访谈关注头条
24H热文一周话题本月最赞
讲师：1人学习过
讲师：24人学习过
讲师：0人学习过
精选博文论坛热帖下载排行
本书全面翔实地介绍了各种病毒的原理，以操作系统的发展为主线，结合病毒的发展过程来综合分析病毒。在分析工具上，较多地利用了脚本语言、...
订阅51CTO邮刊我是局外人,我是火星人
查看原文：
1.+我不是地球人.我是火星人,残酷与炙热的土地,别跟我谈条件.一切都是被逼的.&
&+&感谢我的自卑，它让我越挫越勇，让我永远觉得不如别人，让我不敢停步，让我在人生的路上，一路坚强！&
&+&身心平静如水,心静思远能达千里,没事的时候,我是一棵树.把自己想象一棵参天大树.树高万丈在于根.扎根越深,功夫就越深.&
&+&我是局外人.我是火星人.与己无干,相煎何所为+?+&+心中有数、心中无我，自信、从容才会无人能敌！(&个人愚见)&
2.+相信未来，相信未来的美好，相信明天的生活一定会灿烂如花绽放。&
&+&把所有的悲伤都抛弃，用微笑去面对明天，无论昨天怎样的让我们不快，只要我们学会用乐观、微笑去面对明天，生活一定会给我们一个大大的笑脸，因为这个世界永远不拒绝阳光与微笑。&
生命有限，好好珍惜，有梦想就去努力实现，有心愿就及时行动，有想法就赶快去做，要及时去做，不要等到来不及.&
很多时候当我们怕错过一时也许就会错过一生。&
人生就是一场宴席，每个人都不能缺席，无论你认为自己是优秀的，还是暗淡的。&
但，只要你能勇敢、真实、坦然地去赴宴，你会发现你也与别人一样有一个最好的席位，你也一样会光彩照人。&
无论什么，当你的心中放下了，一切都从此能过去了，路也就通了，宽了，广了。当你放下了，你也就轻松了。&
3.+不再纠结别人对你看法。
扪心自问，什么才是人生的重点？认清真正理想和价值观，就会了解，自己是最棒的。
记住我并没有那么多观众。我并不是世界的中心，你也不是！
承认别人的看法伤不到你，除非你让它伤。
无法控制他人的思想，他人的意见，不论好坏，继续做自己想做的事。
4.+生命是让希望存活人间的惟一方式。只要有生命，只要还活着，什么都会充满希望的。心中有希望，一切都可以度过，一切都会好起来。&
&+&低处是你的根，别忘记常常到低处吸收养分,让我们蓬勃发展，让我们枝繁叶茂。&
&+&养成五个习惯让你福星高照，好运连连:+积极社交,别具慧眼,“谨慎”地冒险,“运气”也就是勤奋工作,清楚何时该“撤退”&
&+&我们的焦点和注意力在哪里，我们的收获就在哪里。我们应该为美好而活！因此，美好才是我们生命的重心，让那些所有的怨恨都随风而去吧！&
&+&我们每个人都应该努力去给自己的生命化妆，提升自己的修养与品味，多思考，多欣赏艺术，多读书。保持心灵的积极、乐观与豁达，让自己的生命高雅，只有这样，生活于更加绚丽多彩！&
5.+我是火星人.+在这片炙热的土地.+我的天性是挺胸直立,骄傲而无所畏惧,勇敢地面对这个世界.&
&+&如果我能够做到的话,我有权成为一个不寻常的人,我寻找机会,但我不寻找安宁.我不希望在国家的照顾下成为一名有保障的市民,那将被人瞧不起而使我痛苦不堪.&
&+&我要做有意义的冒险.我要梦想,我要创造,我要失败,我更要成功.&
&+&我决不用人格来换取施舍;我宁愿向生活挑战,而不愿过有保证的生活;宁愿要达到目标的激动,而不愿要乌托邦毫无生气的平静.我不会拿我的自由去和慈善做交易,也不会拿我的尊严去与发给乞丐的食物做交易.我决不会与在任何一位大师的前面发抖,也不会成为任何恐惧所屈服.&
原创文章，转载请注明：&转载自
已投稿到：君，已阅读到文档的结尾了呢~~
广告剩余8秒
文档加载中
手把手教你用ISA2006搭建vpn服务器超详细教程
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
ISA2006搭建vpn服务器
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口