外部扩展

Externals

Externals用来告诉webpack要构建的代码中，哪一些可以不用去打包，也就是说，这些模块是外部环境提供的，webpack在打包的时候忽略一下。

module.export = {
  // externals 外部文件，不需要打包
  externals: {
    jquery: 'jQuery'
  },
}

测试

index.html 引入jQuery

entry.js

import $ from 'jquery';

console.log($)

$ 还是可以打印出来的。

对代码进行微改

安装

$ npm i moment -D

entry.js

const moment = require('moment');

document.write(moment().locale('zh-cn').format('LLLL'));

Alias

resolve.alias可以设置webpack的别名，把用户的一个请求重定向到另一个路径。可以对webpack 进行性能优化。

module.export = {
 // 寻找模块 配置规则
  resolve: {
    alias: {
         moment: "moment/min/moment-with-locales.min.js"
    }
  }
}

这样待打包的脚本中的 require('moment'); 其实就等价于 require('moment/min/moment-with-locales.min.js'); 。

NoParse

当确定一个模块中没有其他新的依赖就可以配置noParse，webpack 就不会在扫描这个文件中的依赖。可以对webpack 进行性能优化。

module.export = {
  // 不用解析和处理的模块
  noParse: [
    // 使用正则去进行匹配
    /moment-with-locales/
  ],
}

报错

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'noParse'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.

Webpack 4.x已经不再支持NoParse