Как сделать webpack потреблять файлы

Question

Так что я использую Typescript с Webpack.

tsc собирает все от .ts до .js, а затем я хочу использовать webpack, чтобы сделать его пригодным для использования в браузере. Однако проблема в том, что у меня все еще есть все эти файлы .js, лежащие от tsc. Есть ли способ рассказать webpack:

«Упакуйте все эти вещи в красивый комплект и уничтожьте их, когда закончите!»

Answer 1

Да, используйте typescript loader for webpack.

Configuration section этой страницы представлен образец WebPack конфигурацию

module.exports = { 
    entry: './app.ts', 
    output: { 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    // Add `.ts` and `.tsx` as a resolvable extension. 
    extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd also need a '' in the array as well 
    }, 
    module: { 
    loaders: [ // loaders will work with webpack 1 or 2; but will be renamed "rules" in future 
     // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` 
     { test: /\.tsx?$/, loader: 'ts-loader' } 
    ] 
    } 
} 

В качестве второго примера реального мира, здесь есть соответствующий раздел из моего личного webpack.config.js который также устанавливает значение babel и (p)

module: { 
    rules: [ 
     { 
      test: /\.ts(x?)$/, 
      exclude: /node_modules/, 
      use: [ 
       { 
        loader: 'babel-loader', 
        query: { 
         presets: ['es2015'] 
        } 
       }, 
       'ts-loader' 
      ] 
     } 
    ] 
}, 
resolve: { 
    modules: [ 
     __dirname, 
     'node_modules' 
    ], 
    extensions: ['.ts','.tsx','.js'], 
    alias: { 
     'react': 'preact-compat/dist/preact-compat.js', 
     'react-dom': 'preact-compat/dist/preact-compat.js' 
    } 
}, 

Answer 2

Да, это возможно. Для этой цели я рекомендую использовать awesome-typescript-loader.

const rootDir = path.resolve(__dirname); 
const path = require('path'); 

module.exports = { 
    entry: { 
    boot: [path.resolve(rootDir, 'src', 'boot')] 
    }, 
    output: { 
    filename: 'js/[name].bundle.js', 
    path: path.resolve(rootDir, 'build') 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.tsx?$/, 
     loader: 'awesome-typescript-loader', 
     exclude: /node_modules/ 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['.ts', '.tsx', '.js'] 
    } 
}; 

Если использовать 3 модулей сторонних или библиотек, это также рекомендуется создать отдельный пакет для файлов поставщиков и использовать webpack.optimize.CommonsChunkPlugin. Проверьте конфигурацию webpack-typescript-postcss-universal-starter, чтобы узнать, как вы можете легко ее использовать.