如何使用Webpack添加一个JS文件？

Question

我在阅读这篇Webpack教程：

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

它说它会将src文件和node_modules打包。如果我想添加另一个.js文件，该怎么办？这是一个第三方js文件，不是源文件的一部分，也不是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
}

- bier hier

---

可能是如何使用Webpack包含外部文件的重复问题。 - Liam

Answer 1

代码的起点是配置文件中的 entry 字段。在你的配置中，入口点是文件列表。Webpack 会获取所有文件、解析它们的依赖关系并将它们输出到一个文件中。

添加第三方脚本有两个选项：

• 在 app.js 之前将文件路径添加到入口列表中
• 从 app.js 中 require 这个文件

- Dmitry Manannikov

Answer 2

回应Dmitry的答案：

• 在app.js之前将文件路径添加到入口列表中

这样做的效果是，您将获得每个入口点的捆绑.js文件，这可能不是您想要的。

• 从app.js中引用此文件

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

另一个选择：

您可以使用webpack-inject-plugin将任何JS代码作为字符串注入到webpack创建的结果.js捆绑包中。这样，您可以将要注入的文件读取为字符串（例如，在nodejs中使用fs.readFile），并使用插件进行注入。

- Jose V

Answer 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>

- gsingh