Webpack Web包开发服务器:定义WWW根目录
我使用webpack将源文件与分发文件分离 我遇到的一个问题与Webpack Web包开发服务器:定义WWW根目录,webpack,webpack-dev-server,Webpack,Webpack Dev Server,我使用webpack将源文件与分发文件分离 我遇到的一个问题与output.publicPath有关,如果我定义了一个问题,则生成的index.html具有指向CSS和JS资源的错误路径。我认为问题与提取文本网页包插件有关请参见: 现在我已经将代码分为源代码和发行版,我的index.html可在http://localhost/target/classes/war。而且每次页面刷新都需要手动输入URL,因为路由无法识别文件夹名称。头部的标记似乎没有效果 如何指示webpack在http://lo
output.publicPath
有关,如果我定义了一个问题,则生成的index.html具有指向CSS和JS资源的错误路径。我认为问题与提取文本网页包插件有关
请参见:
现在我已经将代码分为源代码和发行版,我的index.html
可在http://localhost/target/classes/war
。而且每次页面刷新都需要手动输入URL,因为路由无法识别文件夹名称。头部的
标记似乎没有效果
如何指示webpack在http://localhost/
?(不使用output.publicPath
)
为了完整起见,请在下面找到完整的webpack.config.js
:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var GoogleFontsPlugin = require("google-fonts-webpack-plugin");
module.exports = {
entry: {
polyfills: './src/main/webapp/polyfills.ts',
vendor: './src/main/webapp/vendor.ts',
app: './src/main/webapp/app/core/global/main/main.ts'
},
output: {
filename: 'target/classes/war/script/[name].[hash].bundle.js'
},
resolve: {
extensions: ['.ts', '.js'],
alias: {
css: path.resolve(__dirname, "src/main/webapp/WEB-INF/scss"),
src: path.resolve(__dirname, "src/main/webapp"),
dist: path.resolve(__dirname, "target/class/war")
}
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
options: {
configFileName: path.resolve(__dirname, "src/main/webapp/WEB-INF/conf/tsconfig.json")
}
},
'angular2-template-loader'
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loaders: [
{
loader: "file-loader",
options: {
hash: "sha512",
digest: "hex",
name: "/target/classes/war/assets/[name].[hash].[ext]"
}
}
]
},
{
test: /\.(css|scss)$/,
exclude: path.resolve(__dirname, "src/main/webapp/scss"),
include: path.resolve(__dirname, "src/main/webapp/app"),
loaders: [
{
loader: "raw-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(css|scss)$/,
exclude: path.resolve(__dirname, "src/main/webapp/app"),
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "resolve-url-loader" // compiles Sass to CSS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)@angular/,
path.resolve(__dirname, "src/main/webapp"), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/main/webapp/index.html',
filename: 'target/classes/war/index.html',
chunksSortMode: function (chunk1, chunk2) {
var order = ['polyfills', 'vendor', 'app'];
var order1 = order.indexOf(chunk1.names[0]);
var order2 = order.indexOf(chunk2.names[0]);
return order1 - order2;
}
}),
new ExtractTextPlugin({
filename: "target/classes/war/css/styles.[contenthash].css"
}),
new GoogleFontsPlugin({
fonts: [
{family: "Lato"}
],
path: "src/main/webapp/scss/fonts/",
filename: "src/main/webapp/scss/fonts/fonts.css"
})
]
};
此网页包配置的结果为
<script type="text/javascript" src="http://localhost/target/classes/war/script/app.5e643bae101bd4743814.bundle.js"></script>
如果我没有弄错,您希望使用
target/classes/war
作为应用程序构建工件的目标路径
您可能使用了错误的output
属性:只需使用,而不是output.publicPath
output.publicPath
通常是您需要将构建与CDN集成的正确选项
请注意,您还应该删除
HtmlWebpackPlugin
的布局设置。我找到了CLI参数--content base
,它提供了所需的功能。我不确定如何从webpack.config.js配置它,但下面的CLI正是我想要的:
webpack-dev-server --inline --open --progress --port 80 --content-base /target/classes/war
该网站现在位于http//localhost/,并从正确的目录提供服务。我想你可能正在寻找这个:它没有解决我最初的问题(请参阅我的答案),但确实帮助我解决了使用extract text webpack插件时遇到的问题。
output: {
filename: 'script/[name].[hash].bundle.js',
path: path.resolve(__dirname, 'target/classes/war'),
},
webpack-dev-server --inline --open --progress --port 80 --content-base /target/classes/war