1

Preciso criar vários arquivos .js um para cada arquivo .ts, mas não sei como configurar o webpack 2 para fazer este procedimento.

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'
 }  
}
3
  • Já estás a usar o padrão [name].bundle.js, não está a funcionar?
    – Sergio
    Commented 7/06/2017 às 16:12
  • Não funciona ele gera os .d.ts que foi configurado no arquivo tsconfig.json, mas não gera os arquivos .js, gera apenas um arquivo gigante .bundle.js. Eu queria um arquivo .js para cara arquivo ts, além dos arquivos bundle.js, porque estou criando uma biblioteca que será importada em outro projeto angular2. Commented 7/06/2017 às 17:11
  • 1
    você já chegou a ver o splitChunks da ferramenta de optimization? a documentação aparentemente se refere a isso que você precisa: Webpack Split Chunks Commented 24/01/2019 às 9:17

1 Resposta 1

1

Eu utilizo dentro do webpack.config uma função para pegar todos os arquivos na raiz da minha pasta

//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') ),
...
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .