Question

我已经使用Webpack-dev-server成功开发了一个网站前端。

现在，我想从我的生产服务器的/static文件夹中提供webpack包。为此，我更改了webpack配置如下：

output.publicPath = "static/"

我的javascript和css捆绑包现在分别在/static/app.<hash>.js和/static/app.<hash>.css位置适当提供（因此，HtmlWebpackPlugin和ExtractTextWebpackPlugin已做出明确回复）。

但是html模板和字体表现得很奇怪，似乎忽略或误解了publicPath设置。

在没有static/前缀的情况下引用Html模板，例如https://example.com/components/header/header.html。

使用前缀DOUBLE引用字体，例如https://example.com/static/static/fontawesome-webfont-db812d8.woff2。

至于物理机器上这些资产的位置：我将javascript包中的内联html模板（app.<hash>.js）作为CommonJS模块。我将字体作为单独的文件放在我网站的/static文件夹中，甚至可以在正确的网址https://example.com/static/fontawesome-webfont-db812d8.woff2下使用。

这是我的完整webpack.config.js生产：

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const environmentsFile = path.join(__dirname, "/environments.json")
const nodeModulesPath = path.join(__dirname, "/node_modules");
const bowerComponentsPath = path.join(__dirname, "/bower_components")

const webpackConfig = {
    entry: {
        app: ["app.js"]
    },

    output: {
        path: path.join(__dirname, "..", "static"),
        publicPath: "/static",
        filename: "app.[hash:7].js"
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ), // bower; see: https://github.com/webpack/docs/wiki/usage-with-bower
        new ExtractTextPlugin("app.[hash:7].css"),
        new HtmlWebpackPlugin({
            inject: "body",
            template: "app/index.html",
            filename: "index.html"
        }),
    ],

    resolve: {
        root: [path.join(__dirname, "/app"), nodeModulesPath, bowerComponentsPath]
    },

    noParse: [nodeModulesPath, bowerComponentsPath],

    module: {
        preLoaders: [
            {
                test: /\.js$/,
                exclude: [nodeModulesPath, bowerComponentsPath],
                loaders: [`env-replace?prefix=@@&file=${environmentsFile}`]
            }
        ],

        loaders: [
            {
                test: /[\/]angular\.js$/,
                exclude: [nodeModulesPath],
                loader: "exports?angular"
            },

            {
                test: /\.js$/,
                exclude: [nodeModulesPath, bowerComponentsPath],
                loaders: ["ng-annotate", "babel?presets[]=es2015&cacheDirectory=true"]
            },

            {
                test: /\.s?css$/,
                loader: ExtractTextPlugin.extract("style", "css?name=[name]-[hash:7].[ext]!postcss-loader!" + `sass?includePaths[]=${path.join(__dirname, "/app")}`)
            },

            {
                test: /\.json$/,
                loader: "json"
            },

            {
                test: /\.(ttf|eot|svg|otf)(\?\S+)?$/,
                loader: "file?name=[name]-[hash:7].[ext]"
            },

            {
                test: /\.(png)$/,
                loader: "url?limit=8192&name=[name]-[hash:7].[ext]&mimetype=image/png"
            },

            {
                test: /\.(gif)$/,
                loader: "url?limit=8192&name=[name]-[hash:7].[ext]&mimetype=image/gif"
            },

            {
                test: /\.(jpg)$/,
                loader: "url?limit=8192&name=[name]-[hash:7].[ext]&mimetype=image/jpeg"
            },

            {
                test: /\.woff(2)?(\?\S+)?$/,
                loader: "url?name=[name]-[hash:7].[ext]&limit=8192&minetype=application/font-woff"
            },

            {
                test: /\.html$/,
                exclude: `${path.join(__dirname, "/app/index.html")}`,
                loaders: [`ngtemplate?relativeTo=${__dirname}`, "html"] //html?attrs[]=div:ng-include
            }
        ]
    },

    postcss: function() {
        return [require('autoprefixer')];
    },

    devServer: {
        contentBase: "./app",
        noInfo: false,
        hot: true,
        inline: true,
        historyApiFallback: true
    }
};

module.exports = webpackConfig;

因此，bug与fileLoader和ngtemplateLoder相关，而且文档记录相对较差，所以我在这里寻求帮助。

Answer 1

问题解决了。

模板的问题与以下事实有关：我没有require他们进入源代码，看起来（这对我来说很奇怪）Webpack开发服务器从文件夹本地服务它们。无论如何，在我require之后，他们被添加到捆绑中并可用。阅读ngTemplateLoader的文档 - 这是一个如何执行此操作的示例。

字体重复路径的问题是由于我没有使用斜杠启动publicPath这一事实，所以当static/a.css导入static/b.css时，浏览器会将其解释为相对路径并查找static/static/b.css。刚刚添加了主要斜杠，问题就解决了。

Webpack字体和模板不尊重publicPath - 加载器有什么问题？

1 个答案: