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'
}
]
},
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!
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.
I have an Express server with a React client-side app, I set up my webpack config to output two bundles, one for my server and one for my react app.
I cannot compile my server bundle unless I comment out the shebang at the start of bin/www. If I do comment it out and compile everything I can't start the server because I get this error:
Error: Cannot find module 'querystring'.
at /Users/jahansj/Documents/personal-projects/roomshake/app_dist/js/app_bundle.js:51283:42
Query string is installed, saved as a dependency and I can see it in my node_modules folder.
I have tried not excluding node_modules from my webpack config as well as using a shebang loader in babel to see if commenting out the shebang was causing the problem somehow.
This is my webpack.config.js:
module.exports = [{
name: 'dev',
entry: './dev/js/main.js',
output: {
path: 'dist/js',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: (/node_modules/ || /app/),
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
}
]
}
},
{
name: 'app',
target: 'node',
entry: './app_dev/bin/www',
output: {
path: 'app_dist/',
filename: 'app_bundle.js'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: (/node_modules/ || /dev/),
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
}
}];
I have a webpack config —
{
entry: ['./src/index.js'],
output: {
path: path.resolve(__dirname, '../', 'public'),
filename: 'bundle.js'
},
devtool: '#inline-source-map',
devServer: {
contentBase: './public'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'},
{
test: /.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015', 'react'],
plugins: ['transform-decorators-legacy', 'transform-object-rest-spread']
}
}
]
}
}
I run the webpack command from the command line it never comes to a stop.
UPDATE:
Apparently it is running in Watch mode. Though I have not passed the watch flag.
UPDATE 1:
The problem was with a npm module config — https://github.com/lorenwest/node-config/wiki/Reserved-Words.
The module contains some reserved words which include watch and was auto added to my configuration.