And*_*yKo 8 javascript typescript reactjs webpack webpack-dev-server
我的意图是拥有这样的目录结构:
- /my-project/
-- /src/ (here are all .tsx files located)
-- /dist/
- index.html
- /build/
-bundle.js
-- /node_modules/
-- package.json
-- tsconfig.json
-- webpack.config.js
所以,我想让我的index.html在/ dist子目录中手动制作,在其中我希望有/ build subdir由webpack创建的app.js.
我希望当我保存位于我的/ src dir webpack中的一些.tsx文件时,自动重建app.js和webpack-dev-server会自动反映更改.
我package.json看起来像这样:
{
"name": "my-project",
"version": "1.0.0",
"description": "My first React App",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
"build": "webpack --config webpack.config.js --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "AndreyKo",
"license": "ISC",
"devDependencies": {
"@types/react": "^0.14.54",
"@types/react-dom": "^0.14.19",
"jquery": "^3.1.1",
"source-map-loader": "^0.1.5",
"ts-loader": "^1.3.0",
"typescript": "^2.1.4",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1"
}
}
我的webpack.config.js:
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "app.js",
publicPath: "/dist/",
path: "./dist/build/"
},
dev_tool: "source-map",
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{test: /\.tsx?$/, loader: 'ts-loader'}
],
preloaders: [
{test: /\.js$/, loader: 'source-map-loader'}
]
}
}
我的index.html:
<!DOCTYPE html>
<html>
<body>
<div id="app-container"></div>
</body>
<script src="./build/app.js"></script>
</html>
我的index.tsx文件看起来像这样:
import * as jQuery from 'jquery';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function appOutput() {
ReactDOM.render(<div>Hello, we are talking from React!</div>, document.getElementById("app-container"));
}
appOutput();
我已经对终端做了命令:
npm run build
npm run start
因此创建了app.js并且webpack-dev-server开始工作并在浏览器中打开页面.到目前为止,一切都很顺利.但是当我更改index.tsx中的文本并保存此文件没有任何更改时,我尝试刷新浏览器页面,文本保持不变,并且不重建app.js.要进行文本更改,我必须通过发出"npm run build"再次从终端再次使用webpack重建app.js.
如何改进我的工作流程以使我/ src文件夹中的更改自动反映在我的dist/build/app.js文件中,而无需手动重建它？
And*_*yKo 10
对于任何可能偶然发现react-webpack-typescript开发的开发环境配置的人,我在这里提供更完整和(更重要的)更正确的答案.不知何故,阅读文档对我来说不够好,我不得不花费超过一天的时间来使它工作.
所以我想得到一个目录结构,其中捆绑的javascript文件比html index.html文件更深一层.查看完整目录结构的初始帖子.
作为开发人员,我想在/ src文件夹中更改一些.tsx文件时,我的更改会反映在浏览器中,我们还需要重新编译捆绑的.js文件.出于这些目的,在项目的package.json文件的脚本块中创建了两个脚本:
"scripts": {
"start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
"build": "webpack --config webpack.config.js --watch",
}
第一个启动webpack-dev-server,为其提供根目录/ dist以及--hot --inline键,使其自动重新加载浏览器页面并摆脱不必要的iframe.当webpack-dev-server启动时,还有--port定义和自动页面 - 打开.
第二个命令是由webpack自动重建捆绑的app.js,这要归功于--watch键.
为了使这些命令按预期工作,应在webpack.config.js中正确配置webpack.对我来说最精致的部分(以及我后来看到的许多其他部分)是输出块的正确路径,publicPath和文件名设置.我在publicPath中的帖子中出现了一个错误,导致我的webpack-dev-server无法正常工作.
不工作的输出块是:
output: {
filename: "app.js",
publicPath: "/dist/",
path: "./dist/build/"
}
有效的输出块是:
output: {
filename: "app.js",
publicPath: "/build/",
path: "./dist/build/"
}
webpack-dev-server使用publicPath属性刷新浏览器页面,它应该设置为编译的.js文件相对于根服务器目录所在的目录,该目录由我的start中的--content-base key设置脚本并在我的项目中引用./dist.所以正确的值是/ build /而不是/ dist /.
webpack和命令使用路径和文件名属性以及如何命名捆绑的.js文件.在我的例子中,将创建./dist/build/app.js文件.
还有一件事情肯定存在于docs中,但我想在这里讨论的是,当我用我的启动脚本启动webpack-dev-server之后保存一些.tsx文件但是没有运行build命令(这使得webpack watch更改)我在浏览器中获得了更新的结果,但我的捆绑的app.js文件没有更改.这是因为webpack-dev-server只更新捆绑的.js文件的内存副本而不是文件本身.要同步,我们需要使用webpack重建捆绑包.
如果我希望我的捆绑的.js文件与浏览器页面保持同步,我需要进行webpack监视更改,并使用webpack-dev-server对页面进行热重载,因此我同时运行"start"和"build"脚本.但我无法在我的Windows开发机器上的一个命令提示符下运行它们,所以我将它们分别运行:
这仅适用于Windows!
start npm run start && start npm run build
为了我的手指,我将这行放入run.bat文件中,该文件放入项目文件夹中.现在我可以在VSCode编辑器中打开windows终端并在那里发出命令"run".
这就是现在.
| 归档时间： |
|
| 查看次数： |
7989 次 |
| 最近记录： |