我知道之前有人问过这个问题,但老实说,我在任何地方都找不到答案——看起来好像我正在做我应该做的一切,但是没有创建 bundle。所以我有这个 webpack.config.js
文件,它应该处理 HMR + React 和 typescript (使用 tsx 语法),但它没有创建包。在编译时没有抛出任何错误,并且似乎一切正常,但是当我尝试获取它时,包返回 404。这是我的文件结构:
someApp/
src/
index.tsx
components/
Hello.tsx
dist/
webpack.config.js
...
这是我的 webpack 配置:
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'
},
};
另一件奇怪的事情是,我认为这可能与通过节点执行此操作有关,因为当我单独运行 webpack
时,它会编译 bundle 。这是我启动服务器的代码:
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/')
})
也许我遗漏了什么,但我是 webpack 的新手,所以任何帮助都会很棒!
最佳答案
那是因为 webpack-dev-server 从内存中为 bundle.js 提供服务。这样做是为了加快服务 bundle.js 的速度。您可以为生产添加另一个 webpack 配置,将 bundle.js 输出到磁盘
module.exports = {
entry: './src/index.tsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
.
.
.
和所有其他模块,只是不包括您的开发服务器
如果你想像 localhost:3000//..../bundle.js 一样获取 bundle.js
试试这个
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'
},
};
编辑:如果你想获取 bundle.js
您必须使用 publicPath 中定义的内容:'/public/'。所以对你来说,你可以从中获取 bundle.js 的 url 是这个 localhost:3000/public/bundle.js
关于javascript - 找不到 bundle.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39049576/