如何重新编译我的NodeJS应用程序以更新文件?为什么图像编码?为什么工作流程如此糟糕?
初学者问题。有一个在服务器上运行的应用程序,它是一个复杂的应用程序。
现在在客户端目录中有一个名为index.html的索引文件(我以为node正在使用express / routed,它在那里做什么)
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
//devtool: '#cheap-module-eval-source-map',
devtool: '#source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
//
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
//
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
1)为什么图像URLS编码?而我可以改为粘贴绝对URL?这不是开发人员友好的,如果他们没有适当的视图并需要额外的步骤,我会立即放弃Node
<img class="color loader-box-image" data-v-553e61a2="" alt=. src="data:image/png;base64,iVBOR....." LONG STRING />
2)好吧假设我在那里更新索引文件,它不会更新实时页面。我必须假设索引文件是缓存的,或者Node本身正在缓存它的某个版本。 index.html只是一个静态文件吗?如果没有,为什么?
获得简化工作流程的最佳做法是什么?
谢谢
编辑:我理解节点本身就像一个网络服务器(基于JS),并且必须建立路由。静态文件如何发挥作用?
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"bootstrap": "^4.0.0",
"bootstrap-social": "^5.1.1",
"dependency-list": "^0.2.2",
"jquery": "^3.2.1",
"jquery-sparkline": "^2.4.0",
"moment": "^2.20.1",
"react-stockcharts": "^0.6.1",
"sitemap": "^1.13.0",
"socicon": "^3.0.5",
"vee-validate": "^2.0.2",
"vue": "^2.5.2",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-event-calendar": "git+https://[email protected]/adi-darachi/vue-event-calendar.git",
"vue-multiselect": "^2.0.8",
"vue-resource": "^1.3.4",
"vue-router": "^3.0.1",
"vue-search-select": "^2.5.0",
"vue-social-sharing": "^2.3.3",
"vue-socket.io": "^2.1.1-a",
"vue-tweet-embed": "^2.0.0",
"vue-virtual-scroll-list": "^1.2.4",
"vuetrend": "^0.2.3",
"vuex": "^3.0.1"
},
> "devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"bootstrap-vue": "^1.4.1",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"compression-webpack-plugin": "^1.1.11",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"npm": "^5.5.1",
"offline-plugin": "^4.9.0",
"opengraph-html-webpack-plugin": "^1.0.0",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"portfinder": "^1.0.13",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"sitemap-webpack-plugin": "^0.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.18.2",
"webpack-merge": "^4.1.0"
},
回答如下:
您正在混淆节点和webpack。节点不对这些图像进行编码,其中一个webpack插件正在这样做以节省网络请求。
另外,您在一条评论中说过:
谢谢,好建议但我不能。我只需要修改一些CSS并交换徽标 - 这应该很简单,但为此我需要在很短的时间内对NodeJS有一个基本的了解。当我得知Node之前使用专用的文件目录时,我不明白为什么首先有一个index.html文件
您正在使用html-webpack-plugin。这会为您生成index.html
文件。请勿修改生成的文件,修改生成文件的配置。否则你会得到回归。阅读该插件的文档,您应该能够找出代码中的徽标抽取位置。