webpack - webpack-dev-server 看起来与 webpack 构建不同
问题描述
我有这两个脚本:
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode none",
yarn build
结果是:
虽然yarn start
结果是:
差异很小,但构建版本 Material UI Drawer 明显没有服务器版本那么宽,并且像素宽度也存在差异。
// webpack.config.js
const Dotenv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const path = require('path');
module.exports = {
devtool: 'eval-cheap-source-map',
entry: './src/index.tsx',
resolve: {
alias: {
Components: path.resolve(__dirname, 'src/components/'),
Helpers: path.resolve(__dirname, 'src/helpers/'),
Src: path.resolve(__dirname, 'src/'),
Assets: path.resolve(__dirname, 'src/assets/'),
},
extensions: ['.ts', '.tsx', '.js'],
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
devServer: {
historyApiFallback: {
index: '/',
},
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new Dotenv(),
new ESLintPlugin(),
],
};
任何人都知道为什么服务器和构建版本之间存在视觉差异?
解决方案
推荐阅读
- javascript - 如何使用for循环(JavaScript)对不同数组中相同索引处的元素求和
- reactjs - 具有反应混合 onClick 的幼虫 8 未触发
- sql-server - 如何在并发删除期间修复死锁
- youtube - 如何为 YouTube 中的视频制作自定义彩色隐藏字幕?
- c++ - 更改框内图像的问题 FLTK
- r - 共享压缩文件夹后闪亮的电子快速启动错误
- agora.io - Agora Channels : 如何获取 Agora RTC 中直播的频道列表?
- hikaricp - 来自 HikariCP 的初始连接
- android - 构建自定义布局应用程序时出现黑屏
- python-3.x - 难以使用 Zenpy 更新宏,要么我缺少位置参数,要么宏对象不包含“更新”属性