webpack怎么会知道index.html，一个文件去加载bundle.js文件

Question

我没有给出任何特定的命令来加载 index.html 但 webpack 会在我对文件进行更改时加载 index.html 页面。

webpack.config.js 文件和 package.json 文件附在下面

webpack.config.js

var config = {
entry: './root.tsx',
output: {
    filename: 'bundle.js',
},
devServer: {
    inline: true,
    port: 8888
},
node: {
    fs: "empty",
    net: "empty",
    tls: "empty"
},
devtool: "#eval-source-map",
module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
            presets: ['es2015', 'react']
            }
        },
        {
            test: /\.scss$/,
            use: [
            {loader: "style-loader"},
            {loader: "css-loader" },
            {loader: "sass-loader"}]
        },
        {
            test: /\.tsx$/,
            exclude: /node_modules/,
            loader: 'ts-loader',            

        }
    ]
}
}
module.exports = config;

package.json

{
  "name": "mypackage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --watch-poll",
    "test": "mocha --reporter spec testSetup.js \"testCase/*.spec.js\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^5.1.3",
    "css-loader": "^0.28.8",
    "enzyme": "^2.9.1",
    "expect": "^22.0.3",
    "jsdom": "^9.12.0",
    "mocha": "^4.1.0",
    "node-sass": "^4.7.2",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.2.0",
    "react-test-renderer": "^16.2.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "ts-loader": "^3.2.0",
    "webpack": "^3.10.0"
  },
  "dependencies": {
    "@types/react": "^16.0.34",
    "@types/react-dom": "^16.0.3",
    "@types/react-router-dom": "^4.2.3",
    "axios": "^0.17.1",
    "babel-preset-react": "^6.24.1",
    "chai": "^4.1.2",
    "debug": "^3.1.0",
    "jquery": "^3.2.1",
    "mysql": "^2.15.0",
    "path": "^0.12.7",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-responsive-table": "^2.0.15",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-table": "^6.7.6",
    "sinon": "^4.1.4",
    "typescript": "^2.6.2",
    "webpack-dev-server": "^2.9.7"
  }
}

请有人告诉我 webpack 在哪里理解，它必须加载 index.html

提前致谢

Answer 1

webpack-dev-server injects some code into your bundle.js file that will triggers a page reload after you make changes to your assets (JS/CSS). By default it knows to look for an index.html file in your root directory. Both the name of the index file and the directory to look for it in 可配置。

您可以通过在 devServer 对象中设置 lazy: true 将行为更改为仅在您手动刷新页面时编译您的资产。这可能很不方便，因为在触发刷新后，webpack 可能需要几秒钟来编译您的资产。

另一种方法是通过启用 hot reloading 使刷新不那么突兀。这不会因完全刷新页面而丢失状态，而是会尝试用新编译的版本即时替换您的实时代码。

如果您希望 webpack 在您更改资产后立即编译它们，但又想手动控制页面刷新，第三种选择是将配置 watch: True (at the top level, not in the devServer object) and disable the webpack-dev-server. In this case, run a separate simple web server like http-server 设置在与您的 [=12] 相同的目录中=] 为您服务页面。

webpack怎么会知道index.html，一个文件去加载bundle.js文件

How will webpack come to know about index.html, a file to load bundle.js file

javascript

reactjs

webpack

webpack-dev-server