Question

我的项目根目录中有以下index.html，它只使用捆绑的js和css文件。

    <html>

<head>
    <meta charset="UTF-8">
    <title>Purchasing Plus</title>
    <link rel="stylesheet" href="./build/style.css" />
</head>

<body>
    <div id="mountPoint"></div>
    <script src="./build/bundle.js"></script>
</body>

</html>

这是我的WebPack Config`

var path = require('path');
var webpack = require('webpack');
var extractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: { main: './source/scripts/main.js' },

    output: {
        filename: './build/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.(scss?|css)$/,
                loader: extractTextPlugin.extract('css!sass'),
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new extractTextPlugin('./build/style.css', {
            allChunks: true
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            mangle: true,
            sourcemap: false,
            beautify: false,
            dead_code: true
        })
    ]
};

这适用于web包开发，我可以运行webpack-dev-server，我的页面显示在http://localhost:8080/

问题是我想在我的生成版本中包含index.html，这样我最终会在build文件夹中将bundle.js，style.css和index.html放在一起。

这可能吗？

Answer 1

最简单的解决方案是使用copy-webpack-plugin。这有助于您将静态文件从一个位置复制到另一个位置。

{
    from: 'path/to/index.html',
    to: 'build/',
    toType: 'file'
},

其他解决方案是使用file-loader。这将测试给定的扩展名并将文件移动到给定位置。您需要将index.html添加到webpack条目。

{
    test: /\.html?$/,
    loader: "file?name=./[name].[ext]"
}

希望这有帮助！

如何将我的Index.html包含在webpack Production build

1 个答案: