angular - 'ng build' move scripts to subfolder -


ng build exports files dist folder follow

index.html   main.bundle.js   styles.bundle.js   ... 

i want scripts in subfolder

*index.html   scripts/main.bundle.js   scripts/styles.bundle.js   ...* 

how can it?

  1. run ng eject -ec (add '-prod' production build, or -aot false jit build). command expose webpack.config.js file in root directory. -ec flag extract css files (instead of serving them js file). (to 'uneject' app again see another answer)
  2. run npm install in order install webpack loaders

  3. in webpack.config.js file edit output entry , add desired directory name js files:

    "output": { "path": path.join(process.cwd(), "dist"), "filename": "scripts/[name].[chunkhash:20].bundle.js", "chunkfilename": "scripts/[id].[chunkhash:20].chunk.js" }

  4. because added -ec flag ng eject command, have css file(s) well. can move dist/styles modifying extracttextplugin plugin under plugins entry in webpack.config.js file:

    new extracttextplugin({ "filename": "styles/[name].[contenthash:20].bundle.css", "disable": false }),

  5. run npm run build since ng build no longer works on ejected apps. should dist directory scripts , styles directories inside along js/css files, index.html should located directly under dist , have correct includes like:

    <link href="styles/styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/> <script type="text/javascript" src="scripts/inline.3d27fc24e48981450c35.bundle.js"></script>


Comments

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

c# - Update a combobox from a presenter (MVP) -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -