Webpack externals 告诉 Webpack 从包中排除某个导入。 外部通常用于排除将通过 CDN 加载的导入,例如,假设您正在 使用 Vue 和 Express 实现服务器端渲染 ,但您的客户端代码通过 CDN 导入 Vue。 假设你有以下 component.js文件:

const Vue = require(vue);

module.exports = Vue.component(hello, {
  props: [name],
  template: <h1>Hello, {{name}}</h1>
});

以上 component.js 在带有服务器端渲染的 Node.js 中完美运行。 但是如何将上述组件与以下组件一起使用 index.html 文件?

<html>
  <body>
    <script src=https://unpkg.com/vue/dist/vue.js></script>

    <div></div>
    <script src=dist/component.min.js></script>
    <script>
      new Vue({ template: <hello name=World /> }).
        mount(document.querySelector(#content));
    </script>
  </body>
</html>

下面 webpack.config.js 添加 Vue 作为外部,这意味着 Webpack 不会捆绑 Vue。 相反当 component.js 调用 require(vue),Webpack 将改为返回 global.Vue

module.exports = {
  entry: {
    component: `${__dirname}/component.js`
  },
  output: {
    path: `${__dirname}/dist`,
    filename: [name].min.js
  },
  target: web,
  externals: {
    // Stubs out `require(vue)` so it returns `global.Vue`
    vue: Vue
  }
};

Excluding Node.js Polyfills

externals 的另一个用例是需要在 Node.js 中使用 polyfill 的浏览器 API,例如 FormData 。 如果您正在测试需要 FormData 在 Node.js 中,您需要使用像 form-data npm 模块

const axios = require(axios);
const FormData = require(form-data);

const form = new FormData();
form.append(key, value);
const res = await axios.post(https://httpbin.org/post, form);
console.log(res.data);

自从 FormData 是一个浏览器API,编译上述代码时不需要捆绑它。 所以你可以使用下面的 Webpack 配置:

module.exports = {
  entry: {
    http: `${__dirname}/http.js`
  },
  output: {
    path: `${__dirname}/dist`,
    filename: [name].min.js
  },
  target: web,
  externals: {
    // Stubs out `require(form-data)` so it returns `global.FormData`
    form-data: FormData
  }
};
© 版权声明
评论 抢沙发

请登录后发表评论