提升Webpack的构建速度的方式有哪些？

在行使loader时，可以通过设置include、exclude、test属性来匹配文件，打仗include、exclude划定哪些匹配应用loader

如回收 ES6 的项目为例，在设置 babel-loader时，可以这样：

module.exports = { 

  module: { 

    rules: [ 

      { 

        // 假如项目源码中只有 js 文件就不要写成 /.jsx?$/，晋升正则表达式机能 

        test: /.js$/, 

        // babel-loader 支持缓存转换出的功效，通过 cacheDirectory 选项开启 

        use: ['babel-loader?cacheDirectory'], 

        // 只对项目根目次下的 src 目次中的文件回收 babel-loader 

        include: path.resolve(__dirname, 'src'), 

      }, 

    ] 

  }, 

}; 

在开拓中我们会有各类百般的模块依靠，这些模块也许来自于本身编写的代码，也也许来自第三方库， resolve可以辅佐webpack从每个 require/import 语句中，找到必要引入到吻合的模块代码

通过resolve.extensions是理会到文件时自动添加拓展名，默认环境如下：

module.exports = { 

    ... 

    extensions:[".warm",".mjs",".js",".json"] 

} 

当我们引入文件的时辰，若没有文件后缀名，则会按照数组内的值依次查找

当我们设置的时辰，则不要任意把全部后缀都写在内里，这会挪用多次文件的查找，这样就会减慢打包速率

resolve.modules 用于设置 webpack 去哪些目次下探求第三方模块。默认值为['node_modules']，以是默认会从node_modules中查找文件 当安装的第三方模块都放在项目根目次下的 ./node_modules目次下时，以是可以指明存放第三方模块的绝对路径，以镌汰探求，设置如下：

module.exports = { 

  resolve: { 

    // 行使绝对路径指明第三方模块存放的位置，以镌汰搜刮步调 

    // 个中 __dirname 暗示当前事变目次，也就是项目根目次 

    modules: [path.resolve(__dirname, 'node_modules')] 

  }, 

}; 

alias给一些常用的路径起一个体名，出格当我们的项目目次布局较量深的时辰，一个文件的路径也许是./../../的情势

通过设置alias以镌汰查找进程

module.exports = { 

    ... 

    resolve:{ 

        alias:{ 

            "@":path.resolve(__dirname,'./src') 

        } 

    } 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!