语言►nodejs►库►webpack

webpack配置中的externals属性

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/13/webpack%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84externals%E5%B1%9E%E6%80%A7/

摘要

本文主要讲述了：

  1. 作用
  2. 示例

正文

作用

从外部获取依赖。

示例

learn_webpack/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  externals: {
    jquery: 'jQuery',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'learn_webpack',
      template: 'public/index.html',
    }),
  ],
};

learn_webpack/public/index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  </body>
</html>

learn_webpack/src/index.js

1
2
3
4
import $ from 'jquery';

// 1.12.4
console.log($.fn.jquery);

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/13/webpack%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84externals%E5%B1%9E%E6%80%A7/

本文对你有帮助？请支持我

支付宝
微信