const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
entry: {
main: path.resolve(__dirname, './src/App.tsx'),
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'public'),
sourceMapFilename: "[name].js.map"
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
include: [
path.resolve(__dirname, './src'),
],
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
},
},
{
test: /\.(scss|css)$/,
include: path.resolve(__dirname, './src'),
use: [
MiniCssExtractPlugin.loader,
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: () => [
require("autoprefixer")()
],
},
},
'sass-loader',
],
},
{
test: /\.(png|woff|woff2|eot|ttf|otf|svg)$/,
loader: 'url-loader',
options: {
limit: 100000,
}
},
],
},
resolve: {
extensions: ['.js', '.jsx', 'json', 'ts', 'tsx', '.scss'],
alias: {
src: path.resolve(__dirname, './src/'),
},
},
devServer: {
historyApiFallback: true,
contentBase: './public',
port: 3030,
open: true,
compress: true,
hot: true,
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
};
组件如下所示。UILIB
是我正在使用Yarn Link
链接的本地依赖项
import React from 'react';
import ReactDOM from 'react-dom';
import { Header, Footer } from 'uilib';
import 'uilib/index.css';
export const App: React.FC<{}> = () => (
<>
<Header/>
<div>Hello in oct</div>
<Footer/>
</>
);
ReactDOM.render(
<App />,
document.getElementById('root'),
);
uilib/index.css如下所示
@import url("https://cloud.typography.com/7374818/6819812/css/fonts.css");
.header {
height: 70px;
}
我觉得ulib
文件夹可能不在src
目录中。
您是否可以尝试将SCSSCSS
的webpack加载器配置更改为如下所示:
{
test: /\.(scss|css)$/,
include: path.resolve(__dirname) // <---- leave it __dirname or remove the prop completely
....
....
}
我希望这能让webpack查看Project的root,这样可以帮助它相应地解析文件。
我得到下面的错误,我不明白为什么我认为应该有一些与巴贝尔。我使用web开发服务器和babel。它在反应。 我的Webconfig文件如下所示: 我的package.json文件如下所示: 我错过了什么?这与path.resolve有关吗?
我正在尝试使用Webpack构建一个简单的React应用程序,但是在从Webpack dev服务器运行时,我遇到以下错误: 以下是我的Webpack.config.js文件内容: app.js文件内容从“React”导入React从“React dom”导入ReactDOM从“React dom”导入{Switch,BrowserRouter,Route}从“React router dom”导入
我刚刚开始使用一个升级的模板将我的aspdotnet core Aurelia项目升级到3.0,该模板是我用来创建项目的模板。 我把我的文件(在以前的项目工作)到这个新版本,我已经结束了一堆错误,从webpack的第一个是在标题中概述。 网页包也已升级。这是我收到的第一个错误。。 发现了与此相同的问题,结果发现我没有替身,所以是另外一个问题。。 我还检查了这个标题非常相似的问题,但我相信webpa
我正面临下面的错误。我尝试了所有的解决方案在其他文章中提到的相同的问题。但没有运气。请帮帮忙。 下面是我的档案。 package.json webpack.conf.js 应用程序JS index.js
我正在编写一个React组件库,我想在其他项目中使用它,而没有太多的开销(bit、create-react-library、generact等),也不需要发布。我想使用将其作为中的符号链接添加到我的项目中。此命令将符号链接添加到项目node_modules。在shared_lib中,我只有一个的测试 : 我面临的问题是当我将组件导入到工作项目中时出现以下错误: 错误: 编辑:在应用了下面答案(ht
我在做“NPM运行构建”我的react应用程序时遇到了一个问题。其说法如下: 下面提到的错误: 4)./src/helloworld.jsx 5)package.json