Develop Reference

Do I need Babel if I want to support JavaScript in my TypeScript React project? (without CRA)

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" }
]
},
...
}

Webpack debuging tools

I build my project using webpack and want to be able to look at the code in browser but webpack devtools doesn't appear in browser.
I wonder why? I did everything like they say in a book.
Here is my webpack.config file
var path = require('path');
module.exports = {
entry: "./src/App.js",
output: {
path: path.join(__dirname, "dist", "assets"),
filename: 'bundle.js',
sourceMapFilename: 'bundle.map'
},
devtool: "#source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
}
]
}
}
And here is devtools in browser without webpack in it
Why doesn't it appear in the browser devtools?

You havent set the mode, which defaults to production. See here: https://webpack.js.org/configuration/mode/
And it should be source-map, without the #. Also added sourceMap to the module options, see if that helps.
var path = require('path');
module.exports = {
mode: 'development', // This
entry: "./src/App.js",
output: {
path: path.join(__dirname, "dist", "assets"),
filename: 'bundle.js',
sourceMapFilename: 'bundle.map'
},
devtool: "source-map", // This
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
sourceMap: true, // This
}
}
}
]
}
}

Webpack bundled all files from dir

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'
}
]
},

Moving from webpack v1 to v2

I'm trying to migrate my code from webpack v1 to v2 and add in the sass-loader, however I get the error
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
I'm very confused as to what the final file is supposed to look like:
let webpack = require('webpack');
let path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: [
'./src/index'
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}],
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
},
resolve: {
extensions: ['.js'],
options: {
enforceExtension: false
}
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true,
options: {
context: __dirname
}
})
]
};
At the moment the code is a mix of the two versions. I am using webpack version 2.2.1. Thanks.

There are several things you need to change:
Your test: /\.js?$/ and the corresponding loader and exclude should be another object inside the rules array:
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
},
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve.options does not exist, it is just resolve.enforceExtension directly:
resolve: {
extensions: ['.js'],
enforceExtension: false
},
And finally, although it's not an error but just a warning, new webpack.NoErrorsPlugin() is deprecated and has been replaced with:
new webpack.NoEmitOnErrorsPlugin()
Also if you haven't yet, you should have a look at the migration guide from the official docs https://webpack.js.org/guides/migrating/.

How to make webpack consume files

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.