webpack常用配置总览(小结)
简介
看《深入浅出webpack》总结一下常用的webpack的属性的含义并加了一些自己的链接,写在一个文件下更能有全局感受,更能理解各个属性中间的关系,重点要关注entry,output,resolve,module,plugins几部分
配置示例
这并不是一个拿来可用的配置,主要是为了更好理解常用的一些webpack属性的作用,所以每一行都有注释,放到一起,更能看到每一个属性在其中的作用
module.exports={ //__dirname值为所在文件的目录,context默认为执行webpack命令所在的目录 context:path.resolve(__dirname,'app'), //必填项,编译入口,webpack启动会从配置文件开始解析,如下三种(还有一种动态加载entry的方式就是给entry传入一个函数,这个在项目比较大,页面很多的情况下可以优化编译时间) entry:'./app/entry',//只有一个入口,入口只有一个文件 entry:['./app/entry1','./app/entry2'],//只有一个入口,入口有两个文件 //两个入口 entry:{ entry1:'./app/entry1', entry2:'./app/entry2' }, //输出文件配置 output:{ //输出文件存放的目录,必须是string类型的绝对路径 path:path.resolve(__dirname,'dist'), //输出文件的名称 filename:'bundle.js', filename:'[name].js',//配置了多个入口entry是[name]的值会被入口的key值替换,此处输出文件会输出的文件名为entry1.js和entry2.js filename:[chunkhash].js,//根据chunk的内容的Hash值生成文件的名称,其他只还有id,hash,hash和chunkhash后面可以使用:number来取值,默认为20位,比如[name]@[chunkhash:12].js, //文件发布到线上的资源的URL前缀,一般用于描述js和css位置,举个例子,打包项目时会导出一些html,那么html里边注入的script和link的地址就是通过这里配置的 publicPath:"https://cdn.example.com/assets/",//CDN(总是HTTPS协议) publicPath:"//cdn.example.com/assets/",//CDN(协议相同) publicPath:"/assets/",//相对于服务(server-relative) publicPath:"assets/",//相对于HTML页面 publicPath:"../assets/",//相对于HTML页面 publicPath:"",//相对于HTML页面(目录相同) //当需要构建的项目可以被其他模块导入使用,会用到libraryTarget和library library:'xxx',//配置导出库的名称,但是和libraryTarget有关,如果是commonjs2默认导出这个名字就没啥用 //从webpack3.1.0开始,可以为每个target起不同的名称 library:{ root:"MyLibrary", amd:"my-library", commonjs:"my-common-library" }, libraryTarget:'umd',//导出库的类型,枚举值:umd、commonjs2、commonjs,amd、this、var(默认)、assign、window、global、jsonp(区别查看补充2) //需要单独导出的子模块,这样可以直接在引用的时候使用子模块,默认的时候是_entry_return_ libraryExport:'default',//__entry_return_.default libraryExport:'MyModule',//__entry_return_.MyModule libraryExport:['MyModule','MySubModule'],//使用数组代表到指定模块的取值路径__entry_return_.MyModule.MySubModule //配置无入口的chunk在输出时的文件名称,但仅用于在运行过程中生成的Chunk在输出时的文件名称,这个应该一般和插件的导出有关,支持和filename一样的内置变量 chunkFilename:'[id].js', //是否包含文件依赖相关的注释信息,不懂?请看补充3,在mode为development的是默认为true pathinfo:true, //JSONP异步加载chunk,或者拼接多个初始chunk(CommonsChunkPlugin,AggressiveSplittingPlugin) jsonpFunction:'myWebpackJsonp', //此选项会向应盘写入一个输出文件,只在devtool启动了sourceMap选项时采用,默认为`[file].map`,除了和filename一样外还可以使用[file] sourceMapFilename:'[file].map', //浏览器开发者工具里显示的源码模块名称,此选项仅在「devtool使用了需要模块名称的选项」时使用,使用source-map调试,关联模块鼠标移动到上面的时候显示的地址(截不到图啊,醉了),默认这个值是有的,一般不需要关心 devtoolModuleFilenameTemplate:'testtest://[resource-path]' }, //配置模块相关 module:{ rules:[//配置loaders { test:/\.jsx?$/,//匹配规则,匹配文件使用,一般使用正则表达值 include:[path.resolve(__dirname,'app')],//只会命中这个目录文件 exclude:[path.resolve(__diranme,'app/demo-files')],//命中的时候排除的目录 use:[//使用的loader,每一项为一个loader,从该数组的最后一个往前执行 'style-loader',//loader的名称,这样则是使用默认配置,可以在后面加!配置属性,也可以用下面方式 { loader:'css-loader',//loader的名称 options:{}//loader接受的参数 } ], noParse:[//不用解析和处理的模块RegExp|[RegExp]|function(从webpack3.0.0开始) /jquery|lodash/ ] } ] }, //配置插件,关于和loader区别见补充4 plugins:[ //压缩js的plugin newwebpack.optimize.UglifyJsPlugin({ compress:{ warnings:false, drop_console:false, } }), ], //解析文件引用的模块的配置 resolve:{ //模块的根目录,默认从node_modules开始找 modules:[ 'node_modules', 'browser_modules' ], //模块的后缀名,我们引入模块有时候不写扩展名,自动补充扩展名的顺序如下 extensions:['.js','.json','.jsx','.css'], //模块解析时候的别名 alias:{ //那么导入模块时则可以写importmyComponentfrom'$component/myComponent'; $component:'./src/component', //末尾加$精确匹配 xyz$:path.resolve(__dirname,'path/to/file.js') }, //此选项决定优先使用package.json配置哪份导出文件,详见补充5 mainFields:['jsnext:main','browser','main'], //是否强制导入语句写明后缀 enforceExtension:false, //是否将符号链接(symlink)解析到它们的符号链接位置(symlinklocation) symlinks:true, }, //选择一种sourcemap格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。 devtool:'source-map', //配置输出代码的运行环境,可以为async-node,electron-main,electron-renderer,node,node-webkit,web(默认),webworker target:'web', externals:{//使用来自于js运行环境提供的全局变量 jquery:'jQuery' }, //控制台输出日志控制 stats:{ assets:true,//添加资源信息 colors:true,//控制台日志信息是否有颜色 errors:true,//添加错误信息 errorDetails:true,//添加错误的详细信息(就像解析日志一样) hash:true,//添加compilation的哈希值 }, devServer:{//本地开发服务相关配置 proxy:{//代理到后端服务接口 '/api':'http://localhost:3000' }, contentBase:path.join(__dirname,'public'),//配置devserverhttp服务器文件的根目录 compress:true,//是否开启gzip压缩 hot:true,//是否开启模块热交换功能 https:false,//是否开启https模式 historyApiFallback:true,//是否开发HTML5HistoryAPI网页,不太理解TODO }, profile:true,//是否捕捉webpack构建的性能信息,用于分析是什么原因导致的构建性能不佳 cache:false,//缓存生成的webpack模块和chunk,来改善构建速度。缓存默认在观察模式(watchmode)启用。 cache:{ //如果传递一个对象,webpack将使用这个对象进行缓存。保持对此对象的引用,将可以在compiler调用之间共享同一缓存: cache:SharedCache//letSharedCache={} }, watch:true,//是否启用监听模式 watchOptions:{//监听模式选项 ignored:/node_modules/,//不监听的文件或文件夹,支持正则匹配,默认为空 aggregateTimeout:300,监听到变化后,300ms再执行动作,节流,防止文件更新频率太快导致重新编译频率太快 poll:1000//检测文件是否变化,间隔时间 }, //输出文件的性能检查配置 perfomance:{ hints:'warning',//有性能问题时输出警告 hints:'error',//有性能问题时输出错误 hints:false,//关闭性能检查 maxAssetSize:200000,//最大文件大小,单位bytes maxEntrypointSize:400000,//最大入口文件的大小,单位bytes //此属性允许webpack控制用于计算性能提示的文件。 assetFilter:function(assetFilename){ returnassetFilename.endsWith('.css')||assetFilename.endsWith('.js'); } } }
补充
补充1.chunkname是什么
就是打包后代码块的名字
补充2.补充不同的库导出方式的区别
var
varMyLibrary=_entry_return_; //在一个单独的script…… MyLibrary.doSomething();
assign暴露到全局变量中,不要用this分配给this,感觉会放在全局的this上,官网说取决于你
window将模块放在window上
window["MyLibrary"]=_entry_return_; window.MyLibrary.doSomething();
global调动方式使用global['myLibrary']
commonjs
commonjs2
说一下这两种区别,其实这说到了exports和module.exports的区别,exports是module.exports的一个引用
module.exports={}; exports=module.exports; exports['aaaa']=1;//这样是可以的,在module.exports上加了一个属性 exports=2;//会导致exports脱离了对module.exports的引用 modules.exports=2//这样exports的至最后就是2
那么其实commonjs的规定就是使用exports进行导出,而我们经常使用module.exports导出,webpack此处的方式其实就是选择到底是用exports导出还是module.exports导出,区别在于
如果选择commonjs
//webpack输出为 exports['LibraryName']=_entry_return_; //使用库的方法为 require('library-name-in-npm')['LibraryName'].doSomething(); //原因其实就是这么导出最后其实是 //modules.exports={[LibraryName]:_entry_return_}
如果选择commonjs2
//webpack输出为 module.exports=_entry_return_; //使用库的方法为 require('library-name-in-npm').doSomething();
amd
//webpack输出 define("MyLibrary",[],function(){ return_entry_return_;//此模块返回值,是入口chunk返回的值 }); //使用 require(['MyLibrary'],function(MyLibrary){ //使用library做一些事…… });
umd将你的模块暴露为所有模块定义下都可运行的方式
(functionwebpackUniversalModuleDefinition(root,factory){ if(typeofexports==='object'&&typeofmodule==='object') module.exports=factory(); elseif(typeofdefine==='function'&&define.amd) define([],factory); elseif(typeofexports==='object') exports["MyLibrary"]=factory(); else root["MyLibrary"]=factory(); })(typeofself!=='undefined'?self:this,function(){ return_entry_return_;//此模块返回值,是入口chunk返回的值 });
jsonp你的library的依赖将由externals配置定义。
MyLibrary(_entry_return_);
补充3.pathinfo到底是哪些玩意
补充4.plugins和loader什么区别?
我的理解是
loader使用来识别出特定文件,并转换文件内容,方便webpack使用,比如css文件要解析,需要将其转换成js代码放到js中,才能被后续处理(当然可以省略),然后加入最后输出的js当中
plugin是帮助webpack做一些额外的工作,补充一些webpack本身没有实现的功能,有种打补丁的意思,更专注于打包、编译、输出js文件等操作以及在某些阶段要额外做的一些操作,比如html插件将其链接地址插入html
补充5.关于mainFields的解释
有一些第三方模块会针对不同的环境提供几份代码,例如分别提供了ES5和ES6两份代码,在package.json中代码如下:
{ "jsnext:main":"es/index.js",//采用es6的入口文件 "main":"lib/index.js",//采用es5语法的代码入口文件 }
那么webpack会根据mainFields数组里的顺序,逐步找到文件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。