我正在尝试创建一个简单的 webpack 2 设置来试验 BlueprintJS 和 TypeScript。我想我已经接近了，但是 CSS 没有正确加载。
这是这个项目的目录结构
- 源/
- 索引.tsx
- 应用程序.tsx
- 应用程序.css
- 索引.html
- 包.json
- tsconfig.json
- webpack.config.js
App.tsx当前包含一个Button应该显示刷新图标的组件。当我运行时npm run build，webpack 指示样式已加载。但是，当我运行npm run start并查看应用程序时，该按钮没有图标，也没有其他 CSS 样式。
我一定做错了什么。谁能发现它？所有文件的来源都包含在下面。如果您能弄清楚为什么当 App.tsx 中的Button文本发生更改时 webpack-dev-server 不会重新编译，那么您将获得加分。欢迎提出其他建议。
索引.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
应用程序.tsx
import * as React from "react";
import { Button } from "@blueprintjs/core";
import './App.css';
export class App extends React.Component<{}, {}> {
public render(): JSX.Element {
return (
<Button iconName="refresh" text="Refresh"/>
);
}
}
export default App;
应用程序.css
@import "@blueprintjs/core/dist/blueprint.css";
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>BlueprintJS Test</title>
</head>
<body>
<div id="root"></div>
<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
包.json
{
"name": "blueprintplay",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"dependencies": {
"@blueprintjs/core": "^1.14.0",
"classnames": "^2.2.5",
"react": "^15.4.2",
"react-addons-css-transition-group": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"@types/classnames": "^0.0.32",
"@types/pure-render-decorator": "^0.2.27",
"@types/react": "^15.0.18",
"@types/react-addons-css-transition-group": "^15.0.1",
"@types/react-dom": "^0.14.23",
"case-sensitive-paths-webpack-plugin": "^2.0.0",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"source-map-loader": "^0.2.0",
"style-loader": "^0.16.1",
"ts-loader": "^2.0.3",
"typescript": "^2.2.2",
"url-loader": "^0.5.8",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
webpack.config.js
const path = require('path');
module.exports = {
entry: [
'./src/index.tsx'
],
output: {
filename: 'bundle.js',
path: __dirname + "/dist"
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.tsx?$/,
use: "ts-loader"
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.(woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
name: 'fonts/[hash].[ext]',
limit: 5000,
mimetype: 'application/font-woff'
}
}
},
{
test: /\.(ttf|eot|svg)$/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[hash].[ext]'
}
}
},
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
devtool: 'source-map',
devServer: {
host: process.env.HOST, // Defaults to `localhost`
port: process.env.PORT, // Defaults to 8080
hot: true,
},
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
stats: "verbose",
};