![](/img/trans.png)
[英]How do I get the source maps to work in chrome for jhipster app that uses webpack and angular5?
[英]Cannot GET angular5 app on refresh with webpack
我正在構建一個angular5應用,並且我已經引入了HtmlWebpackPlugin,這導致重新加載時無法解決問題。
這是我的webpack配置
webpack.base.config.js
const webpack = require("webpack");
module.exports = {
entry: {
app: "./scripts/app/index",
style: "./scripts/style/index"
},
plugins:[
new webpack.optimize.CommonsChunkPlugin("shared"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: "popper.js"
})
],
module:{
rules: [
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.html?$/, exclude: /node_modules/, use: ["raw-loader"]},
{ test: /^(?!.*component).*\.scss$/, exclude: [/node_modules/], use: ["style-loader", "css-loader", "sass-loader"] },
{ test: /\.component\.scss$/, exclude: [/node_modules/], use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
{ test: /\.tsx?$/, exclude: /node_modules/, use: "awesome-typescript-loader?silent=true" },
{ test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ["url-loader?limit=10000&mimetype=application/font-woff"] },
{ test: /\.(png|gif|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ["file-loader"] }
]
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"]
}
}
webpack.dev.config.js
const baseConfig = require("./webpack.base.config");
const htmlWebpackPlugin = require('html-webpack-plugin');
const merge = require("webpack-merge");
const webpack = require("webpack");
const path = require("path");
module.exports = merge(baseConfig, {
watch: true,
devtool: "inline-source-map",
devServer: {
port: 7777,
historyApiFallback: {
index: "index.html"
}
},
output:{
path: path.resolve("./"),
publicPath: "/",
filename: "[name]-bundle.js"
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
inject: 'body',
hash: true,
template: './index.template.html'
}),
new webpack.DefinePlugin({
API: JSON.stringify("http://myapi.dev/")
})
]
});
如果不使用HtmlWebpackPlugin,但我想利用文件散列,就可以使其正常工作。 任何幫助,將不勝感激!
ž
答案很簡單。 我必須將webpack.dev.config.js中的devServer替換為以下內容
devServer: {
port: 7777,
historyApiFallback: true
},
這在本地運行時有效,但是在部署到Azure時,我需要以下web.config
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.