Webpack 开发服务器:定义 WWW 根

Question

使用 webpack，我将源文件与分发文件分开。

我遇到的一个问题与output.publicPath有关，如果我定义一个，生成的索引.html具有错误的CSS和JS资源的路径。我认为问题与extract-text-webpack-plugin有关 请参阅：https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/246

现在我已经将代码分为源代码和发行版，我的index.html可以在 http://localhost/target/classes/war .每次页面刷新都需要手动输入 URL，因为路由无法识别文件夹名称。头部的<base />标签似乎没有效果。

如何指示 webpack 显示文件夹的内容./target/classes/war 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"
        })
    ]
};

Answer 1

这个 webpack 配置的结果是。

<script type="text/javascript" src="http://localhost/target/classes/war/script/app.5e643bae101bd4743814.bundle.js"></script>

配置

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
 entry: {
  // it's .js now for testing
  app: './src/main/webapp/app/core/global/main/main.js'
 },    
 output: {
  filename: 'target/classes/war/script/[name].[hash].bundle.js',
  publicPath: 'http://localhost/'
 },
 module: {
  rules: [
   {
    test: /.(css|scss)$/,
    loaders: [
     {
      loader: "raw-loader"
     },
     {
      loader: "sass-loader"
     }
    ]
   },
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   // it's .ejs now
   template: 'src/main/webapp/index.template.ejs',
   filename: 'target/classes/war/index.html',
  }),
  new ExtractTextPlugin({
   filename: "target/classes/war/css/styles.[contenthash].css"
  }),    
 ]
};

Answer 2

如果我

正确解决了您的问题，您希望使用 target/classes/war 作为应用程序构建工件的目标路径。

您可能使用了错误的output属性：而不是output.publicPath，只需使用 output.path。

output: {
    filename: 'script/[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'target/classes/war'),
},

如果您需要将构建与 CDN 集成，output.publicPath通常是正确的选择。

请注意，您还应该删除HtmlWebpackPlugin 的layout设置。

Answer 3

我找到了提供所需功能的 CLI 参数--content-base。我不确定如何从 webpack.config.js 配置它，但以下 CLI 正是我正在寻找的：

webpack-dev-server --inline --open --progress --port 80 --content-base /target/classes/war

该站点现在可在 http//localhost/上找到，并从正确的目录提供。