So I use Typescript with Webpack.
tsc compiles everything from .ts to .js and then I want to use webpack to make it usable by the browser. However the problem is that I still have all of these .js files lying around from tsc.
Is there some way to tell webpack:
"Pack all these things into a nice bundle, and destroy them after you're done!"
Yes, use the typescript loader for webpack.
The Configuration section of that page presents a sample webpack config
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' }
]
}
}
As a second real world example, here is the appropriate section from my personal webpack.config.js which also sets up babel and (p)react
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'
}
},
Yes, it's possible. I recommend using awesome-typescript-loader for this purpose.
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']
}
};
If you use 3rd party modules or libraries, it's also recommended to create separate bundle for vendor files and use webpack.optimize.CommonsChunkPlugin. Check out configuration of webpack-typescript-postcss-universal-starter to see how you can easily use it.
Related
The following code is my webpack config for my React project written in TypeScript,
module.exports = {
mode: 'development',
entry: ['./src/main.tsx'],
module: {
rules: [
{
// Only setup a rule for ts/tsx, but no rule for js/jsx yet.
test: /\.tsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
},
],
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
},
plugins: require('./webpack.plugins'),
resolve: {
extensions: ['.js', '.ts', '.json', '.jsx', '.tsx', '.css'],
alias: {
'react-dom': '#hot-loader/react-dom',
...require('./webpack.aliases'),
},
},
}
I have set the rule for ts & tsx extension, yet I haven't setup a js & jsx rule.
I'm wondering do I need to setup Babel config and a rule for js/jsx to load by babel-loader if I want to support both TypeScript & JavaScript in my React project which is not a CRA project?
Or, since I'm already seting up for a TypeScript project, can I just use ts-loader to load my js/jsx extensions?
I just found the TS conversion guide from Microsoft.
In short, they just directly pass js/jsx together with ts/tsx into the ts-loader pipeline since TypeScript also offers transpiling to lower ECMAScript versions and JSX transpilation with a shorter build time in most cases.
module.exports = {
...
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},
module: {
rules: [
{ test: /\.(t|j)sx?$/, use: { loader: 'ts-loader' }, exclude: /node_modules/ }, // here
{ enforce: "pre", test: /\.js$/, exclude: /node_modules/, loader: "source-map-loader" }
]
},
...
}
I have an issue with my generated webpack bundle on IE11.
I have check the bundle and it is due to some arrow functions.
It come from a node_module package : lite-id
My webpack config :
var config = {
devtool: 'source-map',
entry: ["babel-polyfill", APP_DIR + '/index.js'],
output: {
path: BUILD_DIR,
filename: 'BundleNodeJs.js',
libraryTarget: "umd",
},
resolve: {
extensions: ['.js', '.jsx', '.css', '.scss'],
symlinks: false
},
[...]
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules|bower_components/,
loader: "babel-loader",
options: {
presets: ['env', 'react', 'stage-2']
}
},
]
}
};
What is the good way to transpile arrow functions to regular functions in this node module ?
If you know for sure lite-id is the culprint you could try to exclude node_modules except lite-id ex: exclude: /node_modules(?!\/lite-id)/
In doing so you will transpile lite-id along with your code - I think.
Hope it helps!
bundle.js (2.4 Mb) loading take 40 sec - 1.5 min:
This is my webpack.config.js :
const webpack = require('webpack');
const config = {
entry: {
"App":__dirname + '/js/App.jsx'
},
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader',
loader: 'babel-loader?cashezdirectory'
},
// { test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
externals: {
react: 'React',
jquery: 'jQuery'}
};
module.exports = config;
Is the any way to make loading faster?
The configuration that you are using for webpack seems to be a development version. Try using a production configuration which usually provides extra optimisations like uglification and extract CSS plugin.
plugins: [
new ExtractTextPlugin('styles.css'),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true
})
],
This should reduce the bundle size considerably(at least half).
You should also check your server configuration for further optimisations like gzipping which will reduce the download size by ~5 times.
I bundled project with webpack 1. Project is consist of several folders. I noticed that js file that did not imported anywhere also end up in the bundle. Why does it happened?
As i know Webpack should resolve dependency graph and bundle file regarding it.But it seems it just bundle all files from the project directory.
Here is a part of my config:
entry: {
app: [path.resolve(__dirname, '../src/main.js')]
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js',
publicPath: '/',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
Remove the empty string from resolve extension.
I prefer to use the loaders module like so:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0', 'es2015-ie'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},
I'm using webpack and babel to convert my js and vue2 files to es5 and compile into a single build.js
This is my .babelrc
{
"presets": ["latest", 'stage-1'],
"plugins": [
"transform-runtime",
"transform-es2015-arrow-functions"
],
"comments": false
}
and webpack.config.js
var path = require('path'),
webpack = require('webpack');
require("babel-polyfill");
module.exports = {
entry: ['babel-polyfill', './src'],
output: {
path: './dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'style-loader!css-loader!sass-loader',
styl: 'style-loader!css-loader!stylus-loader'
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
{
loader: 'stylus-loader',
},
],
}
]
},
resolve: {
modules: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules')
],
alias: {
vue: 'vue/dist/vue.common.js'
},
extensions: ['.js', '.vue']
},
plugins: [
// new webpack.DefinePlugin({
// 'process.env': {
// 'NODE_ENV': JSON.stringify('production')
// }
// })
]
}
Running the following command, successfuly compiles all js and vue files including the imported ones into build.js
./node_modules/webpack/bin/webpack.js --progress --watch --display-error-details
All es6 compatible codes are converted to es5 except for BaseModal.js in https://github.com/vue-bulma/modal/
BaseModal.js resides in node_modules/vue-bulma-modal/src/ and is imported by Modal.vue in the same package
I import Modal over index.js of the same package by
import {Modal} from 'vue-bulma-modal'
and BaseModal.js ends up in build.js as it is, without being converted to es5.
But if i copy Modal.vue and BaseModal.js directly into my code and update the import paths accordingly , it is converted to es5 just fine without any problems.
What is it that I'm doing wrong in my webpack.config.js?