webpack-html-plugin打包路径配置问题

Question

这个是我最后构建出来的目录：

• assets里面存放了webpack-html-plugin需要的模板文件

• css文件夹就是放的css

• js文件夹存放的js

• pages文件夹存放的构建后输出的html文件

我的webpack文件配置为：

    ....
    output: {
        path: PATHS.dist,
        publicPath: '',   
        filename: 'js/[name].js',
        chunkFilename: 'js/[name].js'
    },
    ....
    plugins: [
        new HtmlWebpackPlugin({
            title: '注册',
            template: './dist/assets/info.html',
            inject: 'body',
            filename: 'pages/index.html'   //输出html文件的位置
        })
    ]

以上的配置文件最后输出的静态文件的路径和上面给的那个图吻合。但是在我的业务逻辑当中使用了require.ensure([], function() {}, 'js/name')去异步加载业务模块。

现在遇到的问题就是通过HtmlWebpackPlugin因为filename的配置带有'pages'这个路径，需要异步加载这些模块的时候也因为多了这个pages而导致异步加载模块加载失败(404 Not Found).正确的路径是dist/js/xxxx.js, dist/css/xxxxx.css，现在却变成了dist/pages/js/xxxx.js, dist/pages/css/xxxx.css.请问如何在不改变最后打包出来的文件路径的情况下进行配置。

Answer 1

感觉是publicPath没设好

Answer 2

HtmlWebpackPlugin因为filename只会影响那一个html文件的位置，不会影响全局的。
publicPath写成根路径吧。
我猜测你现在所在的页面是/page/下面，publicPath为空就是当前路径开始拼接了。

Answer 3

publicPath写成根路径

Answer 4

publicPath写成根目录可以的，我也遇到这样的问题 写成 publicPath:'/'