Ionic 2 change the name main.js (setting webpack.js output.filename)

Question

We have the Ionic 2 application, which is being deployed initially, as well as on the Internet. When building, I use npm run build --prod --release. It just wrapsionic build.

I am trying to update our build process to be able to change the default value main.js.that is in index.html

So, I want to be able to modify this file:

<script src="build/main.js"></script>

s (auto-generated hash)

<script src="build/main.7b297e8f7d1c2760a1bc.js"></script>

Step 1 is to generate the file. I was able to successfully generate the correct file for each assembly using the webpack output.filename setting.

module.exports = {
   entry: [process.env.IONIC_APP_ENTRY_POINT, './web.config', './src/ai.min.js'],
   output: {
    path: '{{BUILD}}',
    filename: '[name].[chunkhash].js',

, , , ionic build , build/main.js. , , - ionic , main.js.

:

[11:00:32] build prod failed: ENOENT: no such file or directory, open '/Users/work/client/www/build/main.js' [11:00:32] ionic-app-script task: "build" [11:00:32] Error: ENOENT: no such file or directory, open '/Users/work/client/www/build/main.js'

, ionic build, , main.js.

Answer 1

, , manjor-.

https://gist.github.com/haydenbr/7df417a8678efc404c820c61b6ffdd24

---

, . , . , . , . , , . github.

, webpack package.json, .

package.json .

  "config": {
    "ionic_webpack": "./webpack.config.js",
    "ionic_source_map_type": "source-map",
    "ionic_uglifyjs": "./www/uglifyjs.config.json"
  }

- . , , :

var path = require('path'),
    fs = require('fs'),
    ManifestPlugin = require('webpack-manifest-plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin');

...

plugins: [
  new HtmlWebpackPlugin({
    filename: './../index.html',
    inject: 'body',
    template: './src/index.html',
    title: 'My App',
  }),
  new ManifestPlugin(),
  updateFileName
]

updateFileName

function updateFileName() {
  this.plugin("done", function() {
  var manifest = require(process.env.IONIC_BUILD_DIR + '/manifest.json'),
      fileName = process.env.IONIC_OUTPUT_JS_FILE_NAME;

    updateUglifyConfig(fileName, manifest);

    process.env.IONIC_OUTPUT_JS_FILE_NAME = manifest[fileName];
  });
}

function updateUglifyConfig(fileName, manifest) {
  var uglifyConfig = {
    sourceFile: manifest[fileName],
    destFileName: manifest[fileName],
    inSourceMap: manifest[fileName + '.map'],
    outSourceMap: manifest[fileName + '.map'],
    mangle: true,
    compress: true,
    comments: true
  };

  // we're writing this to www because it specific to the current
  // build and we don't want to commit it
  fs.writeFileSync(
    path.join(__dirname, 'www', 'uglifyjs.config.json'),
    JSON.stringify(uglifyConfig, null, 4)
  );
}

, ? .json uglify . , process.env.IONIC_OUTPUT_JS_FILE_NAME, , , uglify - , main.js, , .

.

. . , index.html , , <script> javascript, , filename. index.html , , <script src="build/main.js"></script>, . .

, , . www/build/. .

- , process.env.IONIC_OUTPUT_JS_FILE_NAME uglify. , , uglify www, , .

, . , - dev, html pluggin, , process.env.IONIC_OUTPUT_JS_FILE_NAME. , js src/index.html. , dev prod. webpack .

UPDATE:

3:

• , compilerOptions tsconfig:

"module": "es2015", "target": "es5"

2. npm i cheerio --save-dev
3. webpack add var cheerio = require('cheerio')
4. WebPack Manifest.

5. updateFileName :

   function updateFileName() {
     this.plugin("done", function(stats) {
       var buildOutput = stats.toJson()['assetsByChunkName']['main'],
           fileName = process.env.IONIC_OUTPUT_JS_FILE_NAME,
           manifest = {
             [fileName]: buildOutput[0],
             [fileName + '.map']: buildOutput[1]
           };
   
       updateUglifyConfig(fileName, manifest);
   
       process.env.IONIC_OUTPUT_JS_FILE_NAME = manifest[fileName];
       console.log('IONIC_OUTPUT_JS_FILE_NAME', process.env.IONIC_OUTPUT_JS_FILE_NAME);
     });
   }
   

6. Html Webpack Plugin

7. html webpack:

   function updateIndexHTML() {
   this.plugin("done", function(stats) {
   var buildOutput = stats.toJson()['assetsByChunkName']['main'],
       outputFileName = buildOutput[0],
       currentIndexHTML = fs.readFileSync(
         path.join(__dirname, 'src', 'index.html'),
         { encoding: 'utf8' }
       ),
       $ = cheerio.load(currentIndexHTML);
   
   $('body').append(`<script src="build/${outputFileName}"></script>`);
   
   fs.writeFileSync(
     path.join(process.env.IONIC_WWW_DIR, 'index.html'),
     $.html()
   );
     });
   }
   

Answer 2

, (https://forum.ionicframework.com/t/file-revisions/75028/2, aszmyd), main.css. script, oauth.html kajam.js.

, , .

(, - , , , . , - css js.)

, :

node <the-file-name.js>

, script.

#!/usr/bin/env node
'use strict';

var md5File = require('md5-file'),
    fs = require('fs');

/**
 * This script renames files inside platforms/browser/www/ folder and updates their references in html files like index.html
 * The mechanism is for improve caching. So file like `main.js` will be renamed to `main.[FILE-MD5-HASH].js` and its references
 * in html files will be updated.
 */
var buildFolder = 'www/';
var assetsFolder = buildFolder + 'build/';

var jsFiles = [
    'main'
];
var cssFiles = [
    'main'
];
var htmlFilesToUpdate = [
    'index.html'
];
var replacements = [];

jsFiles.forEach(function (file) {
    var hash = md5File.sync(assetsFolder + file + '.js');
    renameFile(file + '.js', file + '.' + hash + '.js');
});

cssFiles.forEach(function (file) {
    var hash = md5File.sync(assetsFolder + file + '.css');
    renameFile(file + '.css', file + '.' + hash + '.css');
});
htmlFilesToUpdate.forEach(function (htmlFile) {
    console.log('Update "' + htmlFile + '" with new file revisions.');
    console.log('Replacements: ' + JSON.stringify(replacements));
    replacements.forEach(function (replacementObject) {
        replaceInFile(buildFolder + htmlFile, replacementObject.from, replacementObject.to);
    });
});

function renameFile(input, output) {
    console.log('Rename "' + input + '" to "' + output + '"');
    fs.rename(assetsFolder + input, assetsFolder + output);
    if (fs.existsSync(assetsFolder + input + '.map')) {
        console.log('Rename "' + input + '.map" to "' + output + '.map"');
        fs.rename(assetsFolder + input + '.map', assetsFolder + output + '.map');
    }
    replacements.push({from: input, to: output});
}

function replaceInFile(file, regex, replacement) {
    var fileContents = fs.readFileSync(file, 'utf-8');
    fs.writeFileSync(file, fileContents.replace(regex, replacement), 'utf8');
}