Javascript 如何使用 webpack 添加一个 js 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44151194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a js file with webpack?
提问by bier hier
I was reading this webpack tutorial:
我正在阅读这个 webpack 教程：
https://webpack.github.io/docs/usage.html
https://webpack.github.io/docs/usage.html
It says it bundles the src files and node_modules. If I want to add another .js file there, how can I do this? This is a thirdpartyjs file that is not part of the source and not part of the node_modules files. This is my current webpack.config.js:
它说它捆绑了 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
}
采纳答案by Dmitry Manannikov
The start point for code is the entryfield in config. In your config entry point is the list of files. Webpack gets all, resolve their dependencies and output in one file.
代码的起点是entryconfig 中的字段。在您的配置入口点是文件列表。Webpack 获取所有信息，解析它们的依赖项并在一个文件中输出。
You have two options for adding third party script:
您有两种添加第三方脚本的选项：
- add the file path to entry list before app.js
- require this file from app.js
- 将文件路径添加到 app.js 之前的条目列表中
- 从 app.js 中需要这个文件
回答by Jose P. V.
In response to Dmitry's answer:
回应德米特里的回答：
- add the file path to entry list before app.js
- 将文件路径添加到 app.js 之前的条目列表中
This has the effect that you will get a bundled .js file for each entry point, which you might not want.
这会导致您将获得每个入口点的捆绑 .js 文件，这是您可能不想要的。
- require this file from app.js
- 从 app.js 中需要这个文件
You might not have access to app.jsif it is written dynamically, or for whatever reason you might not want to edit app.js.
你可能无法访问app.js，如果它是动态写入，或者出于某种原因，你可能不想编辑app.js。
Another option:
另外一个选项：
You can use webpack-inject-pluginto inject any JS code as string into the resulting .js bundle created by webpack. This way you can read the File you want to inject as a string (e.g. fs.readFilein nodejs) and inject it with the plugin.
您可以使用webpack-inject-plugin将任何 JS 代码作为字符串注入到由 webpack 创建的结果 .js 包中。通过这种方式，您可以读取要作为字符串注入的文件（例如fs.readFile在 nodejs 中）并将其与插件一起注入。
