如何在使用webpack时移动“index.html”？

通常，什么时候使用webpack加载“index.html”？如何在使用webpack时移动“index.html”？

我想将“index.html”移动到build /中。

我在使用webpack时遇到了npm数据流的麻烦。

在的package.json， “开始” 的定义是：

"node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js".

但是，我找不到它会从 “的WebPack-DEV-server.js” 跳。

我在它下面发现了两个说明有关 “的index.html”：

 .boolean("history-api-fallback").describe("history-api-fallback", "Fallback to /index.html for Single Page Applications.")

和

console.log("404s will fallback to %s", options.historyApiFallback.index || "/index.html");

当我尝试在建/移动 “的index.html” 来，浏览器返回“无法获取错误”。

“index.html”和webpack.config.js现在在同一个文件夹中。

来源

2017-02-28 user2255716

的方法之一是更新脚本（中的package.json），所以它复制index.html到目标文件夹：

"scripts": { 
    "start": "node node_modules/.bin/webpack-dev-server --content-base src", 
    "build": "node node_modules/.bin/webpack && cp src/index.html build/index.html" 
}

npm run build现在应该也src/index.html复制到build/index.html。

来源

2017-02-28 16:26:01 sn3p

它的工作！我可以通过只使用“--content-base”选项加载“index.html”。由cp构建得也很好，但是不能告诉从build文件夹得到的结果。但是，根本没关系！谢谢！ – user2255716

我不是一个webpack专家，但我面临着同样的问题，并能够使用插件来解决这个问题：html-webpack-plugin

首先安装：npm install html-webpack-plugin --save-dev

然后编辑您的webpack.config.js：

var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    //Your config here (entry, module, resolve, etc.) 
    devServer: { 
     contentBase: './build' //Or any other path you build into 
    }, 
    plugins: [ 
     //other plugins if any 
     new HtmlWebpackPlugin({ 
      template: './index.template.html', //your template file 
      filename: 'index.html', 
      inject: 'body' 
     }) 
    ] 
};

这是要复制您的index.template.html到./build/index.html并从那里提供文件。
它还会将所有资产注入<body>标记的底部。
你可以进一步花费这个设置来满足你的需要，当然，只需refer to the plugin docs。

来源

2017-03-01 07:34:22 andreapier

如何在使用webpack时移动“index.html”？

回答

相关问题