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会在您的bundle.js文件中注入一些代码，这些代码会在您更改资产（JS / CSS）后触发页面重新加载。默认情况下，它知道在根目录中查找index.html文件。 the name of the index file和the directory to look for it in都是可配置的。

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

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

如果您希望webpack在更改资产后立即编译资产，但希望手动控制页面刷新，则第三个选项是设置配置watch: True（在顶层，而不是{{} 1}}}）并禁用devServer。在这种情况下，请在与webpack-dev-server相同的目录中运行单独的简单网络服务器，例如http-server，以便为您提供网页。

webpack将如何了解index.html，这是一个加载bundle.js文件的文件

1 个答案: