I know this question has been asked before, but I honestly can't find the answer anywhere-- it appears as if I'm doing everything I should however bundle is not created. So I have this webpack.config.js file that's supposed to handle HMR + React, and typescript (with tsx syntax), but it's not creating the bundle. Throws no errors on compilation, and seems to be doing alright, but the bundle returns a 404 when I try to fetch it. Here's my file structure:
someApp/
src/
index.tsx
components/
Hello.tsx
dist/
webpack.config.js
...
And here's my webpack config:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index.tsx'
],
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devtool: 'eval',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{
test: /\.tsx?$/,
loaders: [
'react-hot-loader',
'ts-loader'
],
include: path.join(__dirname, '/src')
}
],
preLoaders: [
{ test: /\.js$/, loader: 'source-map-loader' }
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
};
Another strange thing is that I think it might have something to do with executing this through node, since when I just run webpack by itself it compiles the bundle. Here's my code for starting up the server:
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err)
}
console.log('Listening at http://localhost:3000/')
})
Maybe I'm missing something, but I'm pretty new to webpack so any help would be amazing!
Thats because webpack-dev-server is serving bundle.js from memory. This is done to make serving bundle.js fast. You can add another webpack config for production that spits out bundle.js to disk
module.exports = {
entry: './src/index.tsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
.
.
.
and all your other modules, just don't include your dev-server
if you want to fetch bundle.js like localhost:3000//..../bundle.js
try this
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry:'./src/index.tsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
//plugins: [
// new webpack.HotModuleReplacementPlugin()
//],
devtool: 'eval',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{
test: /\.tsx?$/,
loaders: [
'react-hot-loader',
'ts-loader'
],
include: path.join(__dirname, 'src')
}
],
preLoaders: [
{ test: /\.js$/, loader: 'source-map-loader' }
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
};
EDIT: If you want to fetch bundle.js
you have to use what is defined in the publicPath: '/public/'. so for you the url you can fetch bundle.js from is this localhost:3000/public/bundle.js
I think you need to change your output to this:
output: {
path: path.join(__dirname, '/dist'), // <- change last argument
filename: 'bundle.js',
publicPath: '/public/'
},
Related
Hi have one chunk mapped to /cart/ route and when I try to load it chrome throws
Not allowed to load local resource: file:///D:/MyProject/dist/js0.chunk.js error.
Apart from this shouldn't the path be file:///D:/MyProject/dist/js/0.chunk.js ?
Here is my webpack.config.js
const path = require('path');
module.exports = {
cache: true,
entry: './src/ts/main.ts',
output: {
path: path.resolve(__dirname, './dist/js/'),
publicPath: path.resolve(__dirname, './dist/js/'),
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
loaders: [{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular-router-loader']
},
{
test: /\.scss$/,
loader: "css-loader!sass-loader"
}
]
},
devServer: {
contentBase: './dist'
}
};
I am trying to learn webpack, and I think I am confused by __dirname and getting the right entry file to work. Basically, the file I want to use is in app/index.js, and my server.js and webpack.config.js are in config/.
I had this working fine when I had kept server.js and webpack.config.js in the root, but I want to move it into a config folder, and I also added an app folder instead of keeping the contents of the app as it is right now in the root.
I have the following file structure:
.
|++[app]
|----[actions]
|----[modules]
|----[reducers]
|----[store]
|----index.html
|----index.js
|--[config]
|----server.js
|----webpack.config.js
|--[node_modules]
|--package.json
I have the following in my server.js:
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');
var path = require('path');
var app = new (require('express'))();
var port = 9001;
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));
app.get('/*', function(req, res) {
res.sendFile(path.resolve(__dirname) + 'app/index.html');
});
app.listen(port, function(error) {
if (error) {
console.error(error);
} else {
console.info('started on localhost://%s.', port);
}
});
And the webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var isProd = process.env.NODE_ENV === 'production';
module.exports = {
devtool: isProd ? null : 'source-map',
entry: 'app/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
root: path.resolve(__dirname, 'app'),
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: [
'react-hot',
'babel'
],
include: path.join(__dirname, ''),
exclude: /node_modules/
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=img/[name].[ext]'
},
{
test: /\.scss$/,
loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!postcss!sass'
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
postcss: [
autoprefixer({ browsers: ['last 3 versions'] })
]
};
If it helps, the following is my current webpack config
import path from 'path';
import webpack from 'webpack';
export default {
target: 'node',
node: {
// prevents webpack from overwriting the values from node
// https://github.com/webpack/webpack/issues/1599
__dirname: false,
__filename: false
},
devtool: 'source-map',
resolve: {
root: path.resolve(__dirname + '/app'),
extensions: ['', '.js']
},
entry: {
server: './app/app'
},
output: {
path: path.join(__dirname + '/../dist'),
filename: '[name].bundle.js',
libraryTarget: 'commonjs'
},
// prevents node_modules from being bundled by webpack
externals: [/^(?!\.|\/).+/i,],
module: {
loaders: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /(node_modules|dist)/,
cacheDirectory: 'webpack-cache',
query: {
presets: ['es2015'],
plugins: [
'transform-runtime',
'transform-async-to-generator'
]
}
}]
}
}
For debug purposes, I would like to get the line number which produced the error but I am getting this:
It is referencing bundle.js though I've specified debug=true in the webpack.config.js:
var path = require('path')
var webpack = require('webpack')
module.exports = {
debug: true,
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
include: __dirname
}]
}
}
Anyway I can get the line number in the pre-compiled js?
I've tried adding pathInfo as this answer recommended but to no avail.
By default Webpack looks for a specific index.html file in a specified directory, right? What I want to know is can I tell webpack to look for and inject my bundled files in a file that I specify?
I ask this because I'm trying to develop a Ghost theme with webpack and by default, a Ghost theme looks for a default.hbs file to serve as an index file.
I tried to use the HtmlWebpackPlugin to set the filename for entry all while making the same file for web pack's output, but it's not working.
This is my current webpack.dev.config.js:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:2368',
'webpack/hot/only-dev-server',
'./src/router'
],
devtool: 'eval',
debug: true,
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolveLoader: {
modulesDirectories: ['node_modules']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
hash: true,
filename: 'default.hbs',
template: __dirname + '/public/default.hbs',
})
],
resolve: {
extensions: ['', '.js', '.sass', '.css', '.hbs']
},
module: {
loaders: [
// js
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
},
// CSS
{
test: /\.sass$/,
include: path.join(__dirname, 'src'),
loader: 'style-loader!css-loader!sass-loader'
},
// handlebars
{
test: /\.hbs$/,
include: path.join(__dirname, 'public'),
loader: 'handlebars-template-loader'
}
]
},
node: {
fs: 'empty'
}
};
Easiest way: you can configure webpack to use any file and template file via the html-webpack-plugin plugin. You can also specify the element to inject into.
import HtmlWebpackPlugin from 'html-webpack-plugin';
[...]
const plugins = [
new HtmlWebpackPlugin({
template: 'templates/myTemplateFile.tpl.html',
inject: 'body',
filename: 'myOutputFile.html'
})
];
I'm trying to build my React project with Webpack using hot module replacement. But, Webpack ignores file changes. What am I doing wrong?
My config:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:4567',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: [path.join(__dirname, 'src')]
}]
}
};
My files structure:
src
--app
----actions
----components
----constants
----reducers
----app.js
----config.js
--index.js
Hot module replacement works fine if module file is in "src" folder, otherwise nothing happens on changes.
Thanks!
Because you've set include in your webpack config.
You can change your config like this:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:4567',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: [`all of your dirs you want to watch`]
}]
}
};