dis*_*ame 3 javascript node.js npm typescript webpack
一段时间以来，我一直在 Angular 中创建单页应用程序，现在我想创建一个单页应用程序，但不使用整个框架。
我想要一个 .html 文件和一个 javascript 文件，它们将被编译为打字稿文件，比如index.ts. 在里面index.ts我会从其他打字稿文件中导入东西。
网上是否有与我想要实现的项目类似的项目，是否有可能像这样设置 npm 项目？
编辑：
一段时间后，这就是我完成的：我的项目结构：
??? bundle.js
??? functions.ts
??? index.html
??? index.ts
??? package.json
??? style.css
??? tsconfig.json
??? webpack.config.js
包.json
{
"name": "rxjs6-demo",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"start": "webpack-dev-server --open"
},
"devDependencies": {
"ts-loader": "^5.3.1",
"typescript": "^3.2.2",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"rxjs": "^6.4.0"
}
}
配置文件
{
"compilerOptions": {
"outDir": ".",
"noImplicitAny": false,
"sourceMap": true,
"module": "es6",
"target": "es6",
"allowJs": true
},
"include": ["*.ts"],
"exclude": []
}
webpack.config.json
module.exports = {
entry: './index.ts',
output: {
filename: 'bundle.js'
},
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: '.'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
}
};
索引.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
运行npm start将启动一个 webpack-dev-server，它会在每次任何 typescript 文件更改时重新编译我的应用程序。在 index.ts 中，我可以从其他 .ts 文件导入内容。但是我无法完成的是在 html 或 css 文件更改时让 webpack-dev-server 在浏览器中重新加载我的应用程序。
任何有关我的应用程序结构的帮助或一般建议将不胜感激。
使用当前设置，Webpack 不会处理您的.html和.css文件，因此它也不会监视它们的更改是有道理的。您可以指示 Webpack使用和处理文件，而不是link在.html文件中为.css文件添加标签。.csscss-loaderstyle-loader
首先，您需要安装css-loader和style-loader. 例如：
npm i -D css-loader style-loader
css-loader负责处理 CSS 文件并style-loader负责将它们注入到 DOM 中。使用这种方法时，输出bundle.js（在您的示例中）将包含转换后的 JavaScript 和 CSS，而 CSS 本身则包含在 JavaScript 和 DOM 操作中。
接下来，您需要将规则添加到webpack.config.js：
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
这条规则，它位于中rules排列现有一起ts-loader规则，指示的WebPack工艺.css文件首先使用css-loader，然后style-loader。
最后，您可以将导入添加到您的index.ts文件中：
import './style.css';
这应该是 Webpack 开始处理和监视.css文件所需的全部内容。对于其他文件，您可以添加更多import如上所示的语句。
至于.html文件，有一个很好的答案是这里应该帮助。SurviveJS这里还有一本关于样式主题（以及您可能需要的几乎所有其他内容）的出色教程/在线书籍。这本书还涵盖了诸如为生产构建之类的内容，它允许将 CSS 内容提取到一个单独的文件中以用于生产构建等。
| 归档时间： |
|
| 查看次数： |
2007 次 |
| 最近记录： |