const path=require('path') const HappyPack = require('happypack')//把打包任务分解成多个子进程并发的去执行 module.exports={ //entry表示入口，webpack执行构建的第一步将从Entry开始，可抽象成输入 //类型可以是 string，object，array entry:'./app/entry',//只有一个入口，入口只有一个文件 entry:['./app/entry1','./app/entry2'],//只有一个入口，入口有两个文件 entry:{//与两个入口 a:'./app/entry-a', b:['./app/entry-b1','./app/entry-b2'] }, //如何输出结果，在webpack经过一系类处理后，如何输出最终想要的代码 output:{ //输出文件放的目录，必须是string类型的绝对路径 path:path.resolve(__dirname,'dist'), //输出文件的名称 filename:'bundle.js',//完整的名称 filename:'[name].js',//在配置了多个entry时，通过名称模板为不同的entry生成不同的文件名称 filename:'[chunk].[hash].js',//根据文件内容的Hash值生成文件的名称，浏览器长时间缓存文件 //发布到线上的所有资源的URL前缀，为string publicPath:'./assets/',//放到指定目录下 publicPath:'',//放到根目录下 publicPath:'https://cdn/example.com',//放到CDN上 //到出库的名称，为string，不填他时，默认的输出格式是匿名的立即执行函数 library:'MyLibrary', //导出库的类型，为枚举类型，默认是var //numd,num2,commonjs2,commonjs,amd,this,var,assign,window,global,jsonp,可以是这些类型 libraryTarget:'umd', //是否包含有用的文件路径信息到生成代码里，为booleanleix pathinfo:true, //附加chunk的文件名称 chunkFilename:'[id].js', chunkFilename:'[chunkhash].js', //JSON异步加载资源时回调函数名称，需要和服务端搭配 jsonpFunction:'myWebpackJsonp', //生成Source Map文件的名称 sourceMapFilename:'[file].map', //浏览器开发者工具里面显示的资源模块名称 devtoolModuleFilenameTemplate:'webpack:///[resouce-path]', //异步加载跨域的资源时使用的方式 crossOriginLoading:'use-credentials', crossOriginLoading:'aninymous', crossOriginLoading:'false', }, optimization:{//提取公共代码 splitChunks:{ cacheGroups:{ //不同页面之间的公共模块 commons:{ chunks:'initial',//最开始的模块 minChunks:2,//最少有两个复用 }, //第三方模块 vendor:{ chunks:'initial',//最开始的模块 test:/node_modules/, name:"vendor" } } } } //配置模块相关 module:{ rules:[//配置Loader { test:/\.jsx?$/,//正则匹配命中要使用Loader的文件 include:[//只会命中这里面的文件 path.resolve(__dirname,'app') ], exclude:[//忽略这里面的文件 path.resolve(__dirname,'app/demo-files') ], use:[//使用哪些Loader,有先后次序，从后往前 'style-loader',//直接使用Loader的名称 { loader:'css-loader', options:{ //向html-loader传一些参数 presets:[//映射 ['env',{modules:false}]//不编译成ES5语法 ] } } ] }, { test:/\.css?$/, use:'happypack.loader?id=css',//使用多子进程编译 include:path.resolve('./src'), exclude:/node_modules/ } ], noParse:[//不用接喜欢和处理的模块 /special-library\.js$///用正则匹配 ], plugins:[ new HappyPack({ id:'css', loader:['style-loader','css-loader'] }), new HappyPack({ id:'balel', loader:['balel-loader'] }), new WebpackParalleUglifyPlugin()//js文件的串行压缩变为开启多个子进程并行执行 ],//配置插件 //配置寻找模块的规则 resolve:{ modules:[//寻找模块的根目录，为array类型，默认以node_modules为根目录 'node_modules', path.resolve(__dirname,'app') ], extensions:['.js','.json','.jsx','.css'],//模块的后缀名 alias:{//模块别名配置，用于映射模块 //将'module'映射成'new-module',同样'module/path/file'也会被映射成'new-module/path/file' 'module':'new-module', //使用结尾符$后，将'only-module'映射成'new-module'， //但是不想上面说的'module/path/file'不也会被映射成'new-module/path/file' 'only-module$':'new-module', }, alias:[//alias还支持使用数组来更详细地进行配置 { name:'module',//老模块 alias:'new-module',//新模块 //是否映射模块，如果是true，则只有'module'会被映射，如果是false,'module/inner/path'也会被映射 onlyModule:true } ], symlinks:true,//是否跟随文件的软连接去搜索模块的路径 descriptionFiles:['package.json'],//模块的描述文件 mainFields:['main'],//模块的描述文件里面描述的入口文件的字段名 enforeExtension:false,//是否强制导入语句写明后缀名 }, //输出文件的性能检查配置 performance:{ hints:'warning',//有性能问题时输出警告 hints:'error',//有性能问题时输出错误 hints:false,//关闭性能检查 maxAssetSize:200000,//最大文件的大小(单位为bytes) maxEntrypointSize:400000,//最大入口文件的大小 assetFilter:function(assetFilename){//过滤要检查的文件 return assetFilename.endsWith('.css')||assetFilename.endsWith('.js') } }, devtool:'source-map',//配置source-map类型 context:__dirname,//Webpack使用的根目录，string类型必须是绝对路径 target:'web',//浏览器默认 target:'webworker',//WebWorker target:'node',//Node.js,使用'require'语句加载Chunk代码 target:'async-node',//nw.js target:'electron-main',//electron，主线程 target:'electron-renderer',//electron,渲染线程 externals:{//使用来自JavaScript运行环境提供的全局变量 jquery:'jQuery' }, stats:{//控制台输出日志控制 assets:true, colors:true, errors:true, errorDetails:true, hash:true }, devServer:{//DevServer相关的配置 proxy:{//代理到后端服务接口 '/api':'http://loaclhost:3000' }, //配置DevServer HTTP 服务器的文件根目录 contentBase:path.join(__disname,'public'), compress:true,//是否启开Gzip压缩 historyApiFallback:true,//是否开放HTML5 History API 网页 hot:true,//启动模块热加载，需要引入webpack.HotModuleReplacementPlugin()插件 https:false,//是否开启HTTPS模式 inline:true,//在打包文件注入一个websocket客户端 open:true,//打开浏览器 }, profile:true,//是否捕捉Webpack构建的性能信息，用于分析说明原因导致构建性能不佳 cache:false,//是否启用缓存来提升速度 watch:true,//表示是否监控源文件的变化，当源文件发生变化之后，重新打包 wathOpyions:{//监听模式xuanx //不监听的文件或者文件夹，支持正则匹配，默认为空 ignored:/node_modules/, //监听到变化后等300ms在执行动作，截流防止文件更新太快导致重新编译频率太快 aggregateTimeout:300, //不停的询问系统指定的文件有没有发生变化，默认每秒询问1000次 poll:1000 } } } //注册 server Workers if(navigator.serviceWorker){ window.addEventListener('DOMContentLoaded',function(){ //调用serviceWorker.register注册，参数/sw.js 为脚本所在的URL路径 navigator.serviceWorker.register('/sw.js') }) } //缓存版本的唯一标识符，用当前事件代替 let cacheKey=new Date().toISOString(); //当前缓存的白名单，在新脚本的 install 事件里将使用白名单里面的 key let cacheWhitelist=[cacheKey] //需要被缓存的文件的 URL 列表 let cacheFileList=[ 'index.html', 'app.js', 'app.css' ]; //在Service Workers 安装成功之后会派发 install 事件 self.addEventListener('install',function(event){ //等所有资源缓存完成时，才可以进行下一步 event.waitUntil( caches.open(cacheKey).then(function(cache){ //要缓存文件的 URL 列表 return cache.addAll(cacheFileList); }) ) }); //拦截网络请求 self.addEventListener('fetch',function(event){ event.respondWith( //去缓存中查询对应的请求 caches.match(event.request).then(function(response){ if(response){ return response }else{ return fetch(event.request) } }) ) }); //新的Service Workers 线程取得控制权后，将会触发 activate 事件 self.addEventListener('activate',function(event){ event.waitUntil( caches.keys().then(function(cacheNames){ return Promise.all(cacheNames.map(function(cacheName){ //如果不在白名单中缓存全部清理掉 if(cacheWhitelist.indexOf(cacheName)===-1){ //删除缓存 return caches.delete(cacheName) } })) }) ) }) //优化webpack // 1. 侧重优化开发体验的文件 const path = require('path') const CommonsChunkPlugin = require('webpack/lib/optimize/CommonChunkPlugin') const HappyPack = require('happypack')//一个任务分成多个子进程并行 //自动寻找 pages 目录下的所有目录，将每一个目录看做一个单页面应用 const autoWebPlugin = new autoWebPlugin('./src/pages',{ //HTML 模板文件所在的文件路径 template: './template.html', //提取所有页面的公共代码 commonsChunk:{ //提取公共代码 Chunk 的名称 name: 'common' } }) module.exports={ //AutoWebPlugin 会为寻找到的所有单页面应用生成对应的入口配置 //通过autoWebPlugin.entry方法可以获取生成入口的配置 entry:autoWebPlgin.entry({ //这里我们需要引入额外需要的 Chunk 入口 base:'./src/base.js' }), output:{ filename:'[name].js' }, resolve:{ //使用绝对路径指明第三方模块存放的位置，以减少搜索步骤 //其中__dirname 表示当前工作目录，也就是项目的根目录 modules:[path.resolve(__disname,'node_modules')], //针对Npm中的第三方模块，优先采用 jsnext:main 中指向的 ES6模块化语法的文件，使用 Tree Shaking 优化 //只采用 main 字段作为入口文件描述字段，以减少搜索步骤 mainFileds:['jsnext:main','main'], }, module:{ rules:[ {//如果项目源码中只有 js 文件，就不要写成 /\.jsx?$/,以提升正则表达式的性能 test:/\.js$/, //使用 HappyPack 加速构建 use:['happypack/loader?id=babel'], //只对根目录底下的 src 目录文件采用 babel-loader include:path.resolve(__dirname,'src'), }, { //增加对css文件的支持 test:/\.css/, use:['happypack/loader?id=css'] } ] }, plugins:[ autoWebPlugin, //使用 HappyPack 加速构建 new HappyPack({ id:'babel', //babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启 loaders:['babel-loader?cacheDirectory'] }), new HappyPack({ //UI 组件加载拆分 id:'ui-component', loaders:[{ loader:'ui-component-loader', options:{ lib:'antd', style:'style/index.css', camel2:'-' } }] }), new HappyPack({ id:'css', //如何处理.css文件，用法和 Loader 配置中的一样 loaders:['style-loader','css-loader'] }), //提取公共代码 new CommonsChunkPlugin({ chunks:['common','base'], //将公共代码放到 base 中 name:'base' }) ], watchOptions:{ //使用自动刷新，不监听的node_modules 目录下的文件 ignored:/node_modules/ } } //2.配置侧重优化输出质量的文件 const path = require('path') const DefinePlugin = require('webpack/lib/DefinePlugin') const ModuleConcatenationPlugin=require('webpack/lib/optimize/CommonsChunkPlugin') //自动寻找 pages 目录下的所有目录，将每一个目录看做一个单页面应用 const autoWebPlugin = new autoWebPlugin('./src/pages',{ //HTML 模板文件所在的文件路径 template:'./template.html', //提取所有页面的公共代码 commonsChunk:{ //提取公共代码CHunk的名称 name:'common', }, //指定存放CSS 文件的CDN目录URL stylePublicPath:'//css.cdn.com/id/' }); //自动寻找 pages 目录下的所有目录，将每一个目录看做一个单页面应用 const autoWebPlugin = new autoWebPlugin('./src/pages',{ //HTML 模板文件所在的文件路径 template: './template.html', //提取所有页面的公共代码 commonsChunk:{ //提取公共代码 Chunk 的名称 name: 'common' } }) module.exports={ //AutoWebPlugin 会为寻找到的所有单页面应用生成对应的入口配置 //通过autoWebPlugin.entry方法可以获取生成入口的配置 entry:autoWebPlgin.entry({ //这里我们需要引入额外需要的 Chunk 入口 base:'./src/base.js' }), output:{ //为输出的文件名加上 Hash 值 filename:'[name]_[chunkhash:8].js', path:path.resolve(__dirname,'./dist'), //指定存放JavaScript文件的CDN目录URL publicPath:('//js.cdn.com/id/') }, resolve:{ //使用绝对路径指明第三方模块存放的位置，以减少搜索步骤 //其中__dirname 表示当前工作目录，也就是项目的根目录。当node_modules找不到时，会继续找数组中的下一项（下一项存在的情况下） // modules:[path.resolve(__disname,'node_modules'),path.resolve(__disname,'bin')], modules:[path.resolve(__disname,'node_modules')], //针对Npm中的第三方模块，优先采用 jsnext:main 中指向的 ES6模块化语法的文件，使用 Tree Shaking 优化 //只采用 main 字段作为入口文件描述字段，以减少搜索步骤,到对应的package.json里面去找，有没有那个字段 mainFileds:['jsnext:main','main'], //别名配置,当模块加载react模块的时候,直接加载后面的绝对路径，快捷方式或者路径 alias:{ react:path.resolve('.xxxxx') } }, module:{ noParse:[],//不需要递归去加载或者解析此文件 rules:[ {//如果项目源码中只有 js 文件，就不要写成 /\.jsx?$/,以提升正则表达式的性能 test:/\.js$/, //使用 HappyPack 加速构建 use:['happypack/loader?id=babel'], //只对根目录底下的 src 目录文件采用 babel-loader include:path.resolve(__dirname,'src'), }, { //增加对css文件的支持 test:/\.css/, //提取Chunk中的css代码到单独的文件中 use:ExtractTextPlugin.extract({ use: ['happypack/loader?id=css'], //指定存放css中导入只有（例如图片）的CDN目录URL publicPath:'//img.cdb.com/id/' }) } ] }, plugins:[ autoWebPlugin, //开启ScopeHoisting new ModuleConcatenationPlugin(), new HappyPack({ id:'babel', //babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启 loaders:['babel-loader?cacheDirectory'] }), new HappyPack({ //UI 组件加载拆分 id:'ui-component', loaders:[{ loader:'ui-component-loader', options:{ lib:'antd', style:'style/index.css', camel2:'-' } }] }), new HappyPack({ id:'css', //如何处理.css文件，用法和 Loader 配置中的一样 //通过minnimize 选项压缩css代码 loaders:['css-loader?minimize'] }), new ExtractTextPlugin({ filename:`[name]_[contenthash:8].css` }), //提取公共代码 new CommonsChunkPlugin({ //从 common 和base两个现成的chunk中提取公共代码部分 chunks:['common','base'], //将公共代码放到 base 中 name:'base' }), new DefinePlugin({ //定义 NODE_ENV 环境变量为 production ,去除react 代码中开发时才需要的部分 'process.env':{ NODE_ENV:JSON.stringify('priduction') } }), //使用ParallelUglifyPlugin 并行压缩输出的JavaScript代码 new ParallelUglifyPlugin({ uglifyJS:{ output:{ //最紧凑的输出 beautify:false, //删除所有注释 comments:false, }, compress:{ //在 UglifyJS 删除没有用到的代码时不输出警告 warnings:false, //删除所有console语句，可以兼容IE浏览器 drop_console:true, //内嵌已定义但是只用到一次的变量 collapse_vars:true, //提取出现多次但没有定义变量去引用的静态值 reducr_vars:true } } }) ]