Generate multiple . js files with webpack

Asked

Viewed 467 times

1

I need to create several files. js one for each file . ts, but I don’t know how to configure webpack 2 to do this procedure.

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
var helper = require('./helper.js');

module.exports = function(env) {
  return {
    entry: {
      main: path.resolve(__dirname, '..','src','main.ts'),
      vendor: path.resolve(__dirname,'..','src','vendor.ts'),
      polyfills: path.resolve(__dirname,'..','src','polyfills.ts')
    },
    output: {
      path: path.resolve(__dirname, '..' ,'dist'),
      filename: '[name].bundle.js' 
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: ['awesome-typescript-loader','angular2-template-
   loader','angular2-router-loader'],
          exclude: /node_modules/
        },
       {
          test: /\.css$/,
         use: ['css-to-string-loader','style-loader', 'css-loader']
       },
       {
         test: /\.scss$/,
         loader: ExtractTextPlugin.extract({
         fallback: "style-loader",
         use: ['css-loader','sass-loader']
       })
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        use: 'url-loader?limit=100000'
      },
      {
        test: /\.html$/,
        loader: 'raw-loader',
        exclude: /node_modules/
      }
    ]
   },
   resolve: {
     extensions: ['.ts','.js','.css', '.scss', '.json'],
   },
   plugins: [
      new CheckerPlugin(),
      new ExtractTextPlugin('[name].css'),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
      new htmlWebpackPlugin({
        template: path.resolve(__dirname, '..', 'src', 'index.html')
     }),
      new webpack.optimize.CommonsChunkPlugin({
       name: ['main', 'vendor', 'polyfills']
      }),
      new cleanWebpackPlugin(['build-dev'], {
        root: path.resolve(__dirname, '..'),
        verbose: true
     }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(env),
       'env': JSON.stringify(env)
    }),
     new webpack.ContextReplacementPlugin(
       /angular(\\|\/)core(\\|\/)@angular/,
      path.resolve(__dirname, '..','src')
    )
   ],
   devServer: {
     contentBase: path.resolve(__dirname, '..', 'build-dev'),
     inline: true,
     port: 3000
   },
   devtool: 'cheap-eval-source-map'
 }  
}
javascript angular typescript webpack

  • You’re already using the pattern [name].bundle.js, is not working?

  • It does not work it generates the .d.ts that was configured in the tsconfig.json file, but it does not generate the . js files, it generates only a giant .bundle.js file. I wanted a file. js to face ts file, in addition to Bundle.js files, because I am creating a library that will be imported into another angular2 project2.

  • 1

    Have you ever come to see the splitChunks of the Optimization tool? the documentation apparently refers to what you need: Webpack Split Chunks

1 answer

1


I use within webpack.config a function to grab all the files at the root of my folder

//get js Files in folder
let getFiles = (paths)=>{
  let ret = {};
  paths.forEach((path)=>{
    let fileName = path.split('/').slice(-1)[0].split('.js')[0];
    ret[fileName] = path;
  });

  return ret;
}

modules.export = {
...
entry: getFiles( glob.sync(__dirname + 'webpack-source/js/*.js') ),
...
}

Browser other questions tagged javascript angular typescript webpack

You are not signed in. Login or sign up in order to post.