使用webpack的htmlWebpackPlugin插入的script标签文件路径中的../如何去除？

Question

文件目录如下

其中webpack.config.js的内容为

const htmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');

module.exports = {
    entry: {
        "./src/index": path.resolve(__dirname, './src/index.js'),
        "./src/main": path.resolve(__dirname, './src/main.js')
    },
    output: {
        path: path.resolve(__dirname, 'dist'), //打包路径
        filename: `[name].[chunkhash:8].js` //打包后的文件名，[name]是指对应的入口文件的名字
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: './src/index.html',
            chunks: ['./src/index']
        }),
        new htmlWebpackPlugin({
            filename: './src/main.html',
            chunks: ['./src/main']
        })
    ]
}

生成的dist文件夹中的html引入的js文件路径为

 <script type="text/javascript" src=".././src/index.e6e1a374.js"></script>

但是根据我的目录结构实际只需要./index.e6e1a374.js就可以了，请问大佬们，有知道如何去除前面的../的吗？

Answer 1

你是不是写了publicPath, 把他改成""

Answer 2

多了这一层'../'是因为你htmlWebpackPlugin 插件里面的filename属性配成了'./src/index.html'这个值。配成这个值时候，htmlWebpackPlugin处理完html最终生成的路径为'dist/src/index.html'，即dist文件夹底下的src文件夹中。正常情况下，你js打包output的路径为'dist'，所以index.html要引用js得往上一层找js,即 '../[name].js'。所以单单要去掉'../'的话只要把filename属性的'./src'去掉就可以了。

不知道你注意没有，你现在的这个路径为'.././src/index.e6e1a374.js'，这个'.././src'看上去就是多余的，为什么非得返回上一层再进来。正常情况下，output中 path: path.resolve(__dirname, 'dist')时，打包好的文件应该是直接在dist文件夹底下的。但是你在配置入口文件的key时配成了文件路径的形式（./src/index），按理来说打包出来的js文件名称将是'[key].e6e1a374.js', 而由于'./src'的存在，被直接解析层一个文件夹，所以打包结果存在了dist文件夹底下的src文件夹里面。htmlWebpackPlugin插件处理html时会根据html文件的位置和output配置的路径和文件名来引用js, 即path/[key].e6e1a374.js。 所以最终体现为'.././src/index.e6e1a374.js'。个人建议在入口文件配置key时不要含有路径名称，如果需要添加文件夹，在output中配置即可，以免产生不可预期的事情发生。 答得可能有点乱，将就能看，望采纳