Skip to content
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

Open
NetanelBasal opened this issue Dec 9, 2015 · 10 comments
Open

How to inject scripts to index html file in production? #46

NetanelBasal opened this issue Dec 9, 2015 · 10 comments

Comments

@NetanelBasal
Copy link

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:

<script src="script.js"></script>
// I want this script only in the production index html file
<script src="script2.js"></script>
@bfreeds
Copy link

bfreeds commented Dec 13, 2015

@NetanelBasal I believe you are going to want to use the html-webpack-plugin

run npm install --save-dev html-webpack-plugin

//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.

@NetanelBasal
Copy link
Author

Thanks, this is what i am looking for 👍

@danny-libren
Copy link

I'm struggling with the same issue. Can you be more specific in your solution?
Thanks

@tommck
Copy link

tommck commented Jun 16, 2018

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.

@gj1118
Copy link

gj1118 commented Oct 18, 2018

@danny-libren were you able to resolve this ? please suggest.

thanks

@pRizz
Copy link

pRizz commented Oct 26, 2018

An example alternative using https://github.com/webpack-contrib/copy-webpack-plugin

plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../node_modules/liquidfun-prizz/liquidfun.js'),
        to: config.build.assetsSubDirectory, // 'static'
        ignore: ['.*']
      }
    ])
]

Then add this to index.html

    <script src="static/liquidfun.js"></script>

@Franci5co5aoco
Copy link

Franci5co5aoco commented Feb 11, 2019

To inject a script on index.html on dev

  • In config/paths.js Add your path:
// 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
};
  • In webpack.config.dev.js:
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 guess on prod it's similar, webpack.config.prod.js:
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

@moigonzalez
Copy link

moigonzalez commented Jun 4, 2019

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

@tluanga34
Copy link

I have a similar situation where I want to add cordova.js script tag only after build. This is my solution.

 new HtmlWebpackPlugin({
        title : env.project,
        custom : (!isDevelopment)? `<script src="cordova.js"></script>` : '',
        template : `./shared/assets/index_page/index.html`
      }),
<!DOCTYPE html>
<html>
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1">
  </head>
  <body>
    <div id="app"></div>
    <%= htmlWebpackPlugin.options.custom %>
  </body>
</html>

@nitesh982
Copy link

Is there a method to do this using file-loader or html-loader?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants