【问题标题】：How to add a js file with webpack?如何使用 webpack 添加 js 文件？
【发布时间】：2017-10-24 08:58:17
【问题描述】：

我正在阅读这个 webpack 教程：

https://webpack.github.io/docs/usage.html

它说它捆绑了 src 文件和 node_modules。如果我想在那里添加另一个 .js 文件，我该怎么做？这是一个 thirdpartyjs 文件，它不是源代码的一部分，也不是 node_modules 文件的一部分。这是我当前的 webpack.config.js：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './app/app.js'
    ],
    output: {
        path: path.resolve(__dirname, "dist"),
        publicPath: "/dist/",
        filename: "dist.js",
        sourceMapFilename: "dist.map"
    },
    devtool: 'source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        }),
    ],
    module: {
        loaders: [{
            loader: 'babel',
            exclude: /node_modules/
        }]
    },
    devServer: {
        inline: true
    },
    node: {
        fs: "empty"
    },
    watch: false
}

【问题讨论】：

How to include external file with webpack的可能重复

标签： javascript webpack webpack-dev-server

【解决方案1】：

代码的起点是配置中的entry 字段。在您的配置入口点是文件列表。 Webpack 获取所有内容，解决它们的依赖关系并在一个文件中输出。

添加第三方脚本有两种选择：

将文件路径添加到app.js之前的条目列表中
需要 app.js 中的这个文件

【讨论】：

【解决方案2】：

回应德米特里的回答：

将文件路径添加到app.js之前的条目列表中

这意味着您将为每个入口点获得一个捆绑的 .js 文件，这可能是您不想要的。

需要 app.js 中的这个文件

如果app.js 是动态编写的，您可能无法访问它，或者出于任何原因您可能不想编辑app.js。

另一种选择：

您可以使用webpack-inject-plugin 将任何 JS 代码作为字符串注入到由 webpack 创建的结果 .js 包中。通过这种方式，您可以读取要作为字符串注入的文件（例如 nodejs 中的 fs.readFile）并使用插件将其注入。

【讨论】：

【解决方案3】：

另一种解决方案，但不使用任何额外的插件：

//Webpack.config.js
entry: {
  main: './src/index',
 /**
 /* object is passed to load script at global scope and exec immediately
 /* but if you don't need then simply do:
 /* myCustomScriptEntry: './src/myCustomScript'
 */
  myCustomScriptEntry: { 
    import: './src/myCustomScript',
    library: {
      name: 'myCustomScriptEntry',
      type: 'var',
    },
  },
},
new HtmlWebpackPlugin({
  template: './public/index.html',
  excludeChunks: ['myCustomScriptEntry'], //exclude it from being autoreferenced in script tag
  favicon: './public/favicon.svg',
  title: 'Alida',
}),

和

//index.html
<script type="text/javascript" src="<%= compilation.namedChunks.get('myCustomScriptEntry').files[0] %>"></script>

【讨论】：