Webpack2+Vue2项目中引入非npm外部JS文件的最佳方案咨询

当然可以不用在index.html里手动引入这些外部JS文件，Webpack提供了多种灵活的方式来处理这类资源，下面给你介绍几种适配Webpack 2和Vue 2的常用方案：

1. 直接将外部JS作为模块引入（打包进app.js） #

如果这些插件体积不大，或者你希望所有代码都整合到一个打包文件里，这是最简单的实现方式：

• 第一步：把flowchart.js和external2.js移动到项目源码目录下，比如src/assets/js/（路径可以根据你的项目结构调整）。
• 第二步：在Vue项目的入口文件（通常是src/main.js）里直接导入这些文件：

// src/main.js
import './assets/js/flowchart.js'
import './assets/js/external2.js'

// 正常初始化Vue实例
new Vue({
  el: '#app',
  // ...其他项目配置
})

这样Webpack在打包时会自动把这些外部文件的代码合并到最终的app.js中，你只需要在index.html里保留<script src="app.js"></script>这一行就足够了。

⚠️ 小提示：如果这些插件是通过挂载全局对象（比如window）来提供功能的，这种方式完全适用——导入文件时会自动执行其代码，将所需变量挂载到全局环境。

2. 单独打包外部插件（分离代码，优化缓存） #

如果这些插件体积较大，你希望把它们和业务代码分开打包（方便浏览器缓存静态资源，提升加载速度），可以结合Webpack的多入口配置和插件实现：

步骤1：配置Webpack多入口 #

修改你的webpack.config.js，添加一个专门用于外部插件的入口：

// webpack.config.js
const path = require('path')

module.exports = {
  entry: {
    app: './src/main.js', // 业务代码入口
    vendors: ['./src/assets/js/flowchart.js', './src/assets/js/external2.js'] // 外部插件入口
  },
  output: {
    filename: '[name].[chunkhash].js', // 用chunkhash实现缓存优化
    path: path.resolve(__dirname, 'dist')
  },
  // ...其他Webpack配置
}

步骤2：用HtmlWebpackPlugin自动注入打包文件 #

首先安装插件（如果还没安装的话）：

npm install html-webpack-plugin --save-dev

然后在Webpack配置中添加插件配置：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...之前的配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html', // 你的原始index.html模板
      filename: 'index.html',
      inject: 'body' // 自动将script标签注入到body末尾
    })
  ]
}

配置完成后，Webpack会自动把打包后的app.[chunkhash].js和vendors.[chunkhash].js注入到生成的index.html中，你不需要在原始index.html里手动编写任何script标签（基础的meta标签除外）。

3. 复制外部文件到输出目录并自动引入 #

如果这些插件必须保持独立文件的形式（比如有特殊的兼容性需求），可以用copy-webpack-plugin复制文件，再通过HtmlWebpackPlugin自动引入：

步骤1：安装所需插件 #

npm install copy-webpack-plugin html-webpack-plugin --save-dev

步骤2：配置Webpack #

// webpack.config.js
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...其他配置
  plugins: [
    // 把外部JS文件复制到dist目录的对应位置
    new CopyWebpackPlugin({
      patterns: [
        { from: './static/js/flowchart.js', to: 'static/js/' },
        { from: './static/js/external2.js', to: 'static/js/' }
      ]
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      inject: 'body',
      chunks: ['app'],
      // 指定要自动引入的外部JS文件路径
      files: {
        js: ['static/js/flowchart.js', 'static/js/external2.js']
      }
    })
  ]
}

这种方式会自动把外部文件复制到输出目录，同时在生成的index.html里添加对应的script标签，你同样不需要手动修改原始index.html。

总结 #

• 追求简单快捷：直接在入口文件导入外部JS是最优选择；
• 注重性能缓存：多入口配置+HtmlWebpackPlugin是行业最佳实践；
• 需保留独立文件：copy-webpackPlugin+HtmlWebpackPlugin可以满足需求。

内容的提问来源于stack exchange，提问作者Amit Sharma