如何使用 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
}

Answer 1

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

您有两种添加第三方脚本的选项：

• 在app.js之前将文件路径添加到条目列表中
• 需要来自app.js的此文件

Answer 2

回应德米特里的回答：

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

这样可以为每个入口点获取一个捆绑的.js文件，这可能是您不想要的。

• 需要来自app.js的此文件

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

另外一个选项：

您可以使用webpack-inject-plugin将任何JS代码作为字符串注入到由webpack创建的结果.js包中。 这样，您就可以读取你要注入作为字符串的文件（如fs.readFile中的NodeJS），并与插件注入它。

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>