在写组件的时候,会区分开发和生产环境,在webpack中使用插件html-webpack-plugin实现动态生成html文件,使用node 的express搭建一个服务器,webpack的代码如下:
生产环境下:
config.plugins = [ // 提取css为单文件 new ExtractTextPlugin("../[name].[contenthash].css?1.2.1"), new HtmlWebpackPlugin({ filename: '../index.html', template: path.resolve(__dirname, '../src/index.html'), inject: true }) ];
开发环境下:
config.plugins = [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({ filename: 'src/index.html', template: path.resolve(__dirname, '../src/index.html'), inject: true }) ]; 请教下: HtmlWebpackPlugin中的filename 为什么不是一样的,最后访问localhost:8080必须加上/src才能看到对应的页面,是什么原因??
直接带你去看 HtmlWebpackPlugin 源码吧
https://github.com/ampedandwi...
path.relative(compiler.options.output.path, filename);
https://nodejs.org/api/path.h...
The path.relative() method returns the relative path from from to to. If from and to each resolve to the same path (after calling path.resolve() on each), a zero-length string is returned.
以你的配置中的output路径开始,匹配出一个绝对路径,举个例子
> path.relative('./dist', 'index.html') '../index.html' > path.relative('./dist', '../index.html') '../../index.html'
这解释了为什么filename不一样,会导致生成的文件的位置不一致。
而为什么要那么配置,我猜可能是想在打包的时候把index.html作为主入口放在项目根目录,把静态资源文件放到一个目录。
而你的开发配置再我看来就是配错了。
一个小问题,能扯这么久,我也佩服我自己,可能是加班加多了,脑袋有点晕吧