webpack-dev-server+react 编译完成后浏览器里没有文件?
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0"
我在终端用webpack-dev-server命令
控制台显示的是成功了,也没有报错
但是打开浏览器之后发现根本就没有打包好的文件
我尝试过iframe模式,frame里面src="javascript:;"也没有文件的连接
不知道打包的文件都打包到哪里去了
配置如下
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
devpage: './devpage/index.jsx',
querypage: './querypage/index.jsx',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.jsx', '.json'],
alias: {
'react-dom': '@hot-loader/react-dom',
},
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [],
},
},
},
{
enforce: 'pre',
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// eslint options (if necessary)
},
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Rootdictionary',
filename: 'rootDic.html',
chunks: ['querypage', 'commons'],
}),
new HtmlWebpackPlugin({
title: 'devPage',
filename: 'devPage.html',
chunks: ['devpage', 'commons'],
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30,
name: 'commons',
},
},
devtool: 'inline-source-map',
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'dist'),
progress: true,
inline: true,
publicPath: '/dist/',
},
};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论