webpack 异步加载抽取公共代码_webpack异步加载 抽离公共组件 - CSDN
精华内容
参与话题
  • 异步路由,观察http异步组件加载成功,路由配置正确 前端没有显示 报错 3个警告 app.js:42886 [vue-router] Failed to resolve async component default: TypeError: Cannot read property ‘call’ of ...

    场景

    • laravel5.7项目默认的laravel-mix编译
    • 异步路由,观察http异步组件加载成功,路由配置正确

    @babel/plugin-syntax-dynamic-import 已正确安装配置并使用

    • 前端没有一个页面有显示内容,只要在路由出口区的部分全无显示

    报错

    • 3个警告

    app.js:42886 [vue-router] Failed to resolve async component default: TypeError: Cannot read property ‘call’ of undefined
    app.js:42886 [vue-router] uncaught error during route navigation:
    [vue-router] Failed to resolve async component default: TypeError: webpack_require(…) is not a function

    • 1个致命性错误

    app.js:44767 TypeError: Cannot read property ‘call’ of undefined
    at webpack_require (app.js:64)
    at Object…/node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/global/Navigation.vue?vue&type=style&index=0&lang=scss&
    (components-global-Navigation-vue~layouts-Layout-vue.js:172)

    排错

    • js控制台报错,疑似js逻辑有问题,特别at __webpack_require__ (app.js:64),很显然这是一个webpack自带的模板代码导入,但改为同步代码后正常,排除,只能确认错误与异步行为相关
    • 警告信息is not a function,貌似vue-router异步组件被认为返回的不是一个函数?但network显示可以正常加载 ,返回状态都是200,说明异步组件在前端加载是ok的
    • 猜想*webpack_require* 这种地方报错,只能表明webpack某插件(可影响全局操作及相关loader运行)在某种(这里是异步执行)情况下执行,出现了异常,导致不能正常添加属性方法,从而有TypeError: Cannot read property ‘call’ of undefined的警告,检查流程如下
      • mix-manifest.json检查比对导入的路径信息与在服务器端的真实映射文件 ok
      • 查阅laravel-mix依赖的插件,关键主要信息如下
      "laravel-mix": {
                "version": "4.0.15",
                "dev": true,
                "requires": {
                    "@babel/core": "^7.2.0",
                    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
                    "@babel/plugin-transform-runtime": "^7.2.0",
                    "@babel/preset-env": "^7.2.0",
                    "@babel/runtime": "^7.2.0",
                    "extract-text-webpack-plugin": "v4.0.0-beta.0"
                    "friendly-errors-webpack-plugin": "^1.6.1",
                    "optimize-css-assets-webpack-plugin": "^5.0.1",
                    "terser-webpack-plugin": "^1.1.0",
                    "vue-loader": "^15.4.2",
                    "webpack": "^4.27.1",
                    "webpack-cli": "^3.1.2",
                    "webpack-dev-server": "^3.1.14",
                }
            },
    

    分析

    • Cannot read property 'call' of undefined警告信息为凭据,查询官方资源发现有一个关于extract-text-webpack-plugin的issue值得关注

    TL;DR Use mini-css-extract-plugin instead ?
    The webpack >= v4.0.0 ‘support’ for extract-text-webpack-plugin was moved to mini-css-extract-plugin as more lightweight approach for webpack >= v4.0.0 and ETWP entered maintenance mode. We are sorry for the inconvenience here, but ETWP reached a point where maintaining it become too much of a burden and it’s not the first time upgrading a major webpack version was complicated and cumbersome due to issues with ETWP. The mid-term plan is integrate CSS support directly into webpack to avoid this kind of issue in the future

    • 简单点讲:webpack4以上放弃了对extract-text-webpack-plugin插件的治疗,需要用`MiniCssExtractPlugin 来修复这个问题。判断可能是该插件在异步操作抽取css时,出错。
    • __webpack_require__依赖于mix-mainifest.json,而且webpack的一些内部引导代码会依据此内容,生成moduleid(模块标识),管理模块文件的加载顺序及引用次数。

    解决

    • 基于上述两点有如下操作
    • 第一次使用laravel-mix操作只用同步形式生成CSS,不涉及js的编译操作
    • 二次编译生成的异步js,确保mix-mainifest.json只有纯js模块关联
    • 在入口html模板文件内,引入全局第一次编译的css就可以了

    小结

    • 对于异步组件加载,需要加载css文件,但extract-text-webpack-plugin在异步中不给力的加载行为,会有Cannot read property 'call' of undefined警告,间接影响webpack的模板代码加载,最终出现__webpack_require__(...) is not a function,从而报致命错误Cannot read property 'call' of undefined

    • 所以如果不用替代插件,需要在__webpack_require__的导入内容内容上作手脚,将CSS相关的异步加载排除在外,不给webapck来处理加载,交给浏览器同步下载。

    • 附laravel-mix配置文件

    const mix = require('laravel-mix');
    
    // 先单独编译css,二次编译关闭,主要是避免mix配置对象污染
    // mix.sass('resources/sass/app.scss', 'public/css')
    
    mix.js('resources/js/app.js', 'public/js')
        .webpackConfig({
            output: {
                chunkFilename: 'js/[name].js'
            },
            module: {
                rules: [{
                        test: /\.jsx?$/,
                        exclude: /node_modules(?!\/foundation-sites)|bower_components/,
                        use: [{
                            loader: 'babel-loader',
                            // 使用mix默认配置babel,会读取项目根目录下的,babelrc配置(内支持import函数)
                            options: Config.babel()
                        }]
                    }
                ]
            },
            // 配置路径别名
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, 'resources/sass')
                }
            }
        })
    
    展开全文
  • 之前修改公司的运营系统,多年来积累下来的代码使得每次打包构建的时候时间异常漫长,非常难受,一气之下将项目的Webpack从2.x升级到了4.x,原来在Jenkins上一套需要6分钟的流程现在只需2分钟,顿时感到身心舒畅( ̄...

    之前修改公司的运营系统,多年来积累下来的代码使得每次打包构建的时候时间异常漫长,非常难受,一气之下将项目的Webpack从2.x升级到了4.x,原来在Jenkins上一套需要6分钟的流程现在只需2分钟,顿时感到身心舒畅( ̄▽ ̄)/
    并且我顺便把项目划分成多入口项目,实现增量更新,这样就不用每次都打包这么多文件啦!

    ps:以下配置基于React,可以自行根据实际项目用到的框架和库修改


    1. 配置中可优化的点

    先说一下我在升级中发现的可以优化的点,大家有什么建议和想法可以一并提出。

    1.1 优化第三方库

    优化第三方库最简单粗暴并且及其有效的一个方式就是使用webpack的DllPlugin。它可以将我们经常使用但是修改频率极低的第三方库与自己的代码完全分离开, 每次打包的时候会根据索引判断是否需要重新打包第三方库,大大提高了打包速度。用法我就不细说了,网上有很多教程,感兴趣的可以去了解下。
    库的索引一般保存在一个manifest.json文件中。我们可以通过这个文件看到自己项目对第三方库的打包情况。

    优化思路:

    • 项目里安装的第三方库的需要评估必要性,如果很少使用到库的不要在webpackvendor入口指定打包进来。
    • 同时可以升级某些第三方库,如react v16对比react v15,加上react-dom,体积上降低了30%,因此果断升级。
    • 分析manifest.json文件后发现某些库体积特别大,例如使用很广泛的moment.js库。研究后发现webpack把库下面所有的locale文件打包了进来。这是一些支持多语言的文件。即我们可以通过ContextReplacementPlugin插件来挑选我们需要的文件。
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
    ]
    复制代码
    • 有时候通过依赖分析会发现项目里打包了两份第三方库,一份是es module版的,另一份则是umd版的。如moment通过import 'moment'导入的是es module版的,locale文件中却会用相对路径导入umd版的。这时我们可以通过配置别名将库指向同一个版本。
    resolve: {
        alias: {
            'moment$': path.resolve('node_modules/moment/moment'),
        },
    }
    复制代码
    • 有时候项目里并不需要某个库的全部功能,这时候可以考虑用更轻量的库来替代,或者使用定制阉割版(如Echarts, 官网上可定制),并且用import()语法和react-loadable这个库将react组件包装成异步组件,在需要时才进行加载,这样webpack就会将异步组件抽取为异步加载的chunk,就不会多次加载。下面就说如何抽取。

    1.2 抽取异步加载的chunk中的公共代码

    在webpack4之前,我们使用CommonsChunkPlugin来抽取异步组件,但现在CommonsChunkPlugin已经被废弃了,取而代之的是SplitChunksPlugin
    使用方法有两种,一种是像Webpack3那样在plugins中配置,一种是在Webpack4中的optimization属性中的splitChunks配置

        optimization: {
          splitChunks: { // 拆分代码规则(符合即单独拆分到一个chunk中)
            maxInitialRequests: 4, // 在初始化加载时,请求数量大于4
            automaticNameDelimiter: '-',
            name: true, // 代码块的名字,设置为true则表示根据模块和缓存组秘钥自动生成, 实现固化 chunkId,保持缓存的能力
            
            /* 缓存组,用于继续细分代码。
            缓存组默认将node_modules中的模块拆分带一个叫做vendors的代码块, 将最少重复引用两次的模块放入default中。
            或者自定义将符合规则的模块单独拆分进一个chunk中。*/
            
            cacheGroups: {
              default: false, // 禁用默认规则
              vendors: false, // 禁用默认规则
              polyfill: {
                chunks: 'initial',
                test: 'polyfill',
                name: 'polyfill',
              },
              vendor: {
                chunks: 'initial',
                test: 'vendor',
                name: 'vendor',
              },
              // 对异步组件进行抽取
              'async-vendor': {
                name: 'async-vendor',
                chunks: 'async',
                test: (module) => { // 缓存组的规则,表示符合条件的的放入当前缓存组
                  if (/[\\/]node_modules[\\/](echarts|zrender)/.test(module.context)) {
                    return false;
                  }
                  return /[\\/]node_modules[\\/]/.test(module.context);
                },
              },
              'async-biz': {
                name: 'async-biz',
                chunks: 'async',
                minChunks: 2, // 被引用次数大于2时进行拆分
              },
              // css文件单独打包进一个文件中
              'styles': {
                name: 'styles',
                test: /\.css$/,
                chunks: 'async',
                enforce: true,
              },
            },
          },
        },
    复制代码

    当抽取异步加载组件时,我们需要在业务代码中使用下面的写法,webpack才能识别:
    基于react-loadable库,简介: React Loadable 简介

    import Loadable from 'react-loadable';
    const loder1 = import(/* webpackChunkName: "chunkname2" */'path/to/module2')
    const Component = Loadable({
        loader,
        loadingComponent, // loding时使用的组件
    })
    复制代码

    1.3 合理使用异步加载

    若我们项目中的首屏也是使用异步加载的方法,并且用到了async-vendor里的组件,首屏加载时就会同时加载async-vendor并做缓存,这样之后的页面使用到了async-vendor里面的组件之后就无需再次加载新的代码。但是这样就会可能拖慢我们的的首屏速度。
    解决办法一是拆分async-vendor的首屏部分;或是取消首屏页面的异步加载,将其打包到main中,这样就避免了加载async-vendor,大大减少了首屏体积。

    1.4 分离出webpack runtime代码

    webpack在客户端运行时会首先加载webpack相关的代码,例如require函数等,这部分代码会随着每次修改业务代码后发生变化,原因是这里面会包含chunk id等容易变化的信息。如果不抽取出来将会被打包在vendor当中,导致vendor每次都要被用户重新加载。抽离的配置写在optimization属性中的runtimeChunk配置中:

    optimization: {
        runtimeChunk: {
            name: 'manifest',
        },
    }
    复制代码

    1.5 webpack内部优化

    webpack4之前,内部优化主要使用两个插件:HashedModuleIdsPluginModuleConcatenationPlugin
    默认情况下,webpack会为每个模块用数字做为ID,这样会导致同一个模块在添加删除其他模块后,ID会发生变化,不利于缓存。
    为了解决这个问题,有两种选择:NamedModulesPluginHashedModuleIdsPlugin,前者会用模块的文件路径作为模块名,后者会对路径进行md5处理。因为前者处理速度较快,而后者打包出来的文件体积较小,所以应该开发环境时选择前者,生产环境时选择后者。
    ModuleConcatenationPlugin主要是作用域提升,将所有模块放在同一个作用域当中,一方面能提高运行速度,另一方面也能降低文件体积。前提是你的代码是用es模块写的。
    在 webpack4 中,只需要optimization的配置项中设置 moduleIdshashed或者named, 设置modeproduction即可。

    mode:'production',
    optimization : {
        moduleIds: 'hashed',
    }
    复制代码

    1.6 babel-polyfill优化

    目前本人项目里用的方法是命名一个来源于babel-polyfill的polyfill的文件,但是注释掉了大部分的import,仅保留项目的基本需求,并在在项目入口文件中引入。

    // webpack 中配置
    entry: {
      polyfill: path.join(process.cwd(), 'path/to/your/polyfill'),
    },
    复制代码

    参考下别人一些对polyfill优化的的优秀文章:

    2.参考文章

    webpack4——SplitChunksPlugin使用指南
    多页应用 Webpack4 配置优化与踩坑记录
    webpack 配置笔记 (这是我同事的blog哈哈,里面有我们现在使用的Webpack的具体配置,大家感兴趣可以去里面仔细看看学习,他是个高手,大家可以多多关注~)

    3. 结语

    上面的优化是基于对webpack有一定了解的情况下进行的,若你对webpack还不是很了解,我推荐到 webpack中文文档 里学习基础知识,并且到掘金上面搜索更多关于webpack的优秀文章啦!

    展开全文
  • webpack2打包配置文件说明,常见的loader模块加载器以及plugin插件部分的介绍,vue配合bootstrap搭建前端项目demo讲解

    webpack介绍

    Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

    从这个介绍中可以看出webpack提供的是一种模块化管理工具,工具是死的用的人是活的,所以怎么用webpack还是要看每个人的想法,通过对前端技术的开发的经验来看我们在前端编码过程中遇到的比较多的模块就是css、js、html、img以及这些文件组合所产生的插件比如

    1. jQuery、echartd3.js等就是一个纯js插件只需要引入js文件就可以调用API实现相关功能

    2. animate.cssNormalize.css就是一个纯css的模块

    3. bootstrap则是三个模块的组合字体图标文件,css文件以及js文件

    通过对这些使用比较广泛的插件的使用和研究我们在设计自己的公共模块时也可以借鉴下,在平时的前端页面开发过程中我们能总结出前端代码分为两部分,一部分是调用的第三方插件(js,css,图片等),这部分代码我们是不需要去做改动的,一部分就是自己写的代码,这部分的代码就是我们的自由发挥空间;因此我们在使用webpack进行项目搭建时需要对这两部分的资源进行组织和规范,

    对于第三方插件部分配置好路径,在引入模块的时候注意下(后面会详细介绍)
    对于自己写的这部分代码进行模块化组织时需要考虑到js,css,html的公共模块复用

    webpack2配置文件

    接下来我们开始webpack2的webpack.config.js配置文件的介绍(只介绍几个常用的属性更多的介绍请查看webpack配置文件

    module.exports = {
        devtool: 'source-map',
        // entry数据类型(string|object|array)
        entry:{
            common:['jQuery','bootstrap','vue'],
            app:path.resolve(__dirname, '../src/views/index/index.js'),
            test:path.resolve(__dirname, '../src/views/test/index.js')
        } , 
        output: { //打包路径
            publicPath: "/assets/", //配合devServer本地Server
            filename: 'js/[name].bundle.js?v=[hash]', //出口文件名
            path: path.resolve(__dirname, '../dist/'), //打包路径
        },
        resolve: {
            //设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
            extensions: [' ','.css','.less','.js','.json','.vue'],
            //查找module的话从这里开始查找;
            modules: [path.resolve(__dirname, "src"), "node_modules"], //绝对路径;
            //别名设置,在模块加载时可以少写点路
            alias: {
                "components":path.resolve(__dirname,'../src/components'),
                "assets":path.resolve(__dirname,'../src/assets'),
                "lib":path.resolve(__dirname,'../src/lib'),         
            }
        },
        //插件部分,html,css部分的打包配置
        plugins:[
            new HtmlWebpackPlugin({
                filename: 'index.html', //设置最后生成文件名称;
                //设置原文件模块,ejs是webpack内置的加载器不需要安装(安装也没问题)
                template: path.resolve(__dirname,'../src/views/index/index.ejs') 
            }),
            new HtmlWebpackPlugin({
                filename: 'index.html', //设置最后生成文件名称;
                //设置原文件模块,ejs是webpack内置的加载器不需要安装(安装也没问题)
                template: path.resolve(__dirname,'../src/views/test/index.html') ,
                chunks:
            }),
        ],
        module:{
            rules:[
                {
                    //正则匹配后缀.js文件;
                    test: /\.js$/,
                    //需要排除的目录        
                    exclude: /node_modules/,
                    //加载babel-loader转译es6
                    use: [{
                        loader: 'babel-loader',
                        //配置参数,wecpack2后loader的参数都在这里配置
                        options: {
                            presets: ['es2015']
                        }
                    }],
                },
                //更多的loader配置请关注github上面的源码...
            ]
        }
    }

    webpack加载包

    webpack的强大之处在于丰富的loader模块以及插件部分同时也为我们预留了自定义loader的接口以及plugin接口让我们可以按自己的要求来加载组织和处理特定的模块

    下面介绍下我们在开发过程中经常会用到的loader模块加载器以及前端代码处理插件

    //es6语法插件
    npm install babel-core babel-loader babel-preset-es2015 --save-dev 
    //样式提取压缩
    npm install cssnano extract-text-webpack-plugin optimize-css-assets-webpack-plugin --save-dev 
    //样式模块加载器(自动添加前缀)
    npm install style-loader css-loader less-loader less postcss-loader autoprefixer --save-dev
    //图片字体文件加载器
    npm install url-loader img-loader file-loader 
    //webpack打包框架
    npm install html-webpack-plugin webpack webpack-dev-server --save-dev

    webpack2项目介绍

    这里写图片描述

    这是我写的一个demo,这个demo用的就是webpack2打包的将bootstrap、jQuery、Vue整合在一起了,在vue和bootstrap的整合期间发现如果用到vue的组件部分bootstrap的部分样式会失效,所以这里在写demo时刻意回避了使用vue的组件,下图是vue与bootstrap组合使用的效果
    demo视图
    demo视图

    视图部分是通过bootstrap的样式部分完成的自己只是写了少部分的样式代码,界面的交互以及分页部分翻页实现则是通过vue实现的,
    这里多页面打包的方式是在webpack.config.js文件中配置的

    //入口点配置的js文件,chunk
    entry: { 
            //公共js部分
            commons:[
                'lib/jquery-2.1.0.js',
                'lib/bootstrap/js/bootstrap.min.js',
                'lib/vue.js'
            ],
            //index.html专属的入口文件
            app: path.resolve(__dirname, '../src/views/index/index.js'),
            //test.html的js入口文件
            test:path.resolve(__dirname, '../src/views/test/index.js')
    },
    //入口点的js模块配置好后接下来就是plugin部分的html插件部分
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html', //设置最后生成文件名称;
            //这个模板是ejs文件
            template: path.resolve(__dirname,'../src/views/index/index.ejs'),
            chunks:['commons','app']//指定index页面需要的模块
        }),
        new HtmlWebpackPlugin({
            filename: 'test.html', //设置最后生成文件名称;
            template: path.resolve(__dirname,'../src/views/test/index.html'), 
            chunks:['commons','test']//指定test页面需要的模块
        }),
        //webpack内置自动加载插件
        new webpack.ProvidePlugin({
            vue: 'lib/vue.js',//遇到vue的变量会按照配置的文件路径加载vue模块
            jQuery:'lib/jquery-2.1.0.js'
        })
    ],
    //路径别名配置,让模块加载更直观
    resolve: {
        //设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
        extensions: [' ','.css','.less','.js','.json','.vue'],
        //模块路径查找时先从数组第一个开始寻找,找不到在去node_modules目录下寻找
        modules: [path.resolve(__dirname, "src"), "node_modules"],
        //别名设置
        alias: {
            "components":path.resolve(__dirname,'../src/components'),
            "assets":path.resolve(__dirname,'../src/assets'),
            "lib":path.resolve(__dirname,'../src/lib'),         
        }
    }

    以上这些配置是比较关键的地方主要,如果大家想查看更全面的代码可以在github上查看webpack2-demo项目的源码

    下篇将会介绍webpack进阶篇,后台数据源代理配合后端开发调试前端页面以及热替换的配置

    展开全文
  • 官网介绍:http://www.css88.com/doc/webpack2/plugins/commons-chunk-plugin/下面代码的源码见:一、介绍CommonsChunkPlugin 插件,是一个可选的用于建立一个独立文件(又称作 chunk)的功能,这个文件包括多个入口...
  • webpack代码分割技巧

    千次阅读 2018-09-12 10:27:19
    分割点指定的模块只有在真正使用时才加载,可以使用webpack提供的require.ensure语法: $('#okButton').click(function(){ require.ensure(['./foo'], function(require) { var foo = require('./foo'); ...
  • webpack——CommonsChunkPlugin

    千次阅读 2018-12-26 15:30:23
    虽然webpack4已经出来很久了,CommonsChunkPlugin也已经舍弃了,但是还是有很多项目是通过webpack3来打包的,对CommonsChunkPlugin各个配置项的认识还是比较模糊,这里做个详细的记录。 CommonsChunkPlugin通过将...
  • webpack系类之代码分割和懒加载

    千次阅读 2018-04-11 21:16:47
    webpack实现代码方式是主要是通过模块的引入方式 1.require.ensure //进行代码分割 require.ensure(['lodash'],function(){ var _ = require('lodash');//上边的require.ensure只会引入进来,但是并不会执行...
  • webpack4——splitChunks

    千次阅读 2018-12-28 13:51:57
    webpack4也已经出来好久了,之前写了一篇CommonsChunksplugin的,但webpack4已经废弃了CommonsChunksplugin,改用了splitChunks;splitChunks在用法上和思想用都有所不同,更加方便,但是总体来说,还是大同小异。 ...
  • webpack的loaders是一块很重要的组成部分。我们都知道webpack是用于资源打包的,里面的所有资源都是“模块”,内部实现了对模块资源进行加载的机制。但是Webpack本身只能处理 js模块,如果要处理其他类型的文件,就...
  • webpack介绍、配置、使用

    千次阅读 2017-12-06 17:43:28
    webpack使用
  • Vue开发看这里就够了

    万次阅读 2018-03-08 11:09:10
    Vue -渐进式JavaScript框架介绍vue 中文网vue githubVue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别?Library库,本质上是一些函数的集合。每次调用函数,实现一...
  • Vue 项目性能优化方案

    千次阅读 2019-08-23 10:01:29
    但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来,希.....
  • WebPack系列教程(十二):示例

    千次阅读 2016-03-10 14:52:12
    简单示例基本用法 CommonJs example.jsvar inc = require('./increment').increment; var a = 1; inc(a); // 2increment.jsvar add = require('./math').add; exports.increment = function(val) { ...
  • Vue 知识点汇总(下)--附案例代码及项目地址

    千次阅读 多人点赞 2020-01-14 01:53:43
    文章目录Vue预备知识与后续知识及项目案例一、简介1.Vue (读音 /vjuː/,类似于 view)的简单认识2.Vue.js安装二、Vue知识量化三、内容1、Webpack 详解什么是Webpack?前端模块化**和grunt/gulp的对比**webpack安装...
  • 建议在github阅读,我会及时更新最新内容1.webpack打包时候添加参数–display-modules这时候,我们在控制台中输出的 “+ 1 hidden modules”都会显示出来–watch监控文件的变化并自动编译。–display-chunks显示一个...
  • 关于网友提出的“ webpack build后生成的app、vendor、manifest三者有何职能不同?”问题疑问,本网通过在网上对“ webpack build后生成的app、vendor、manifest三者有何职能不同?”有关的相关答案进行了整理,供...
  • webpack使用教程(一)

    千次阅读 2017-01-04 15:25:37
    对于webpack的使用我分成了两个部分来写,在这篇博客中主要是对webpack的基本概念、使用方法进行说明。在下一篇博客我会对在一个项目中具体怎么应用进行说明。webpack简介webpack是一种模块化方案,将JS、CSS和图片...
  • 文章目录vue+typescript+webpack4 项目搭建步骤1、初始化项目2、webpack@3.6.0升级至webpack@4.37.01、webpack.optimize.CommonsChunkPlugin2、compilation.mainTemplate.applyPluginsWaterfall3、Error: Ch...
  • 10道web前端开发经典面试题总结整理

    千次阅读 2019-01-02 13:47:34
    1、CSS,JS代码压缩,以及代码CDN托管,图片整合。  (1)CSS,JS 代码压缩:  可以应用gulp的gulp-uglify,gulp-minify-css模块完成;可以应用webpack的 UglifyJsPlugin压缩插件完成。  (2)CDN:  内容分发网络...
1 2 3 4 5 ... 20
收藏数 744
精华内容 297
关键字:

webpack 异步加载抽取公共代码