-
Notifications
You must be signed in to change notification settings - Fork 694
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to inject scripts to index html file in production? #46
Comments
@NetanelBasal I believe you are going to want to use the html-webpack-plugin run //webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//regular webpack configuration
plugins: [
new HtmlWebpackPlugin ({
inject: true,
template: 'path/to/index.html'
})
]
} Check out this tutorial for more info, and also the webpack-html-plugin repo for config options. |
Thanks, this is what i am looking for 👍 |
I'm struggling with the same issue. Can you be more specific in your solution? |
For anyone else who hits this searching, I believe he's saying to use separate templates for each environment (dev/prod) and vary the script tags that way. |
@danny-libren were you able to resolve this ? please suggest. thanks |
An example alternative using https://github.com/webpack-contrib/copy-webpack-plugin
Then add this to
|
To inject a script on index.html on dev
// config after eject: we're in ./config/
module.exports = {
dotenv: resolveApp('.env'),
...
servedPath: getServedPath(resolveApp('package.json')),
myScript: resolveApp('scripts/myScript') // <= here add your path
};
module.exports = {
mode: 'development',
// ...
devtool: 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// ...
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
paths.myScript // <= here put your script
module.exports = {
mode: 'development',
// ...
devtool: 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// ...
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
paths.myScript // <= here put your script |
I faced this issue and ended using add-asset-html-plugin https://www.npmjs.com/package/add-asset-html-webpack-plugin The config ended up being something like: //webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
module.exports = env => {
//regular webpack configuration
plugins: [
new HtmlWebpackPlugin ({
inject: true,
template: 'path/to/index.html'
}),
new AddAssetHtmlPlugin(
env.NODE_ENV === "production"
? [
{
filepath: require.resolve("../script2.js"),
},
]
: []
),
]
} or of couse using webpack.config.prod.js and webpack.config.dev.js instead of using process.env |
I have a similar situation where I want to add cordova.js script tag only after build. This is my solution.
|
Is there a method to do this using file-loader or html-loader? |
I have a index html file and i need to inject in production ENV additional scripts. with gulp i can do this with plugin like gulp inject, How can i do this with webpack?
For example:
The text was updated successfully, but these errors were encountered: