Question

我有以下html以及一些SVG和图片：

<body class="noselect">
    <div class="noselect viewer" id="plotter">
        <a class="arrow-controls next-page flex" id="next">
            <?xml version="1.0" encoding="utf-8"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
                <path fill="#fff" d="M5 20c-0.128 0-0.256-0.049-0.354-0.146-0.195-0.195-0.195-0.512 0-0.707l8.646-8.646-8.646-8.646c-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0l9 9c0.195 0.195 0.195 0.512 0 0.707l-9 9c-0.098 0.098-0.226 0.146-0.354 0.146z"></path>
            </svg>
        </a>
        <a class="arrow-controls previous-page flex" id="prev">
            <?xml version="1.0" encoding="utf-8"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
                <path fill="#fff" d="M14 20c0.128 0 0.256-0.049 0.354-0.146 0.195-0.195 0.195-0.512 0-0.707l-8.646-8.646 8.646-8.646c0.195-0.195 0.195-0.512 0-0.707s-0.512-0.195-0.707 0l-9 9c-0.195 0.195-0.195 0.512 0 0.707l9 9c0.098 0.098 0.226 0.146 0.354 0.146z"></path>
            </svg>
        </a>
        <div id="book">
            <div class="page green left">
                <img src = "../images/page-1.jpg" width="100%" height="100%" /> 
            </div>
            <div class="page blue right flipped"> 
                <img src = "../images/page-2.jpg" width="100%" height="100%" />
             </div>
            <div class="page green left "> 
                <img src = "../images/page-3.jpg" width="100%" height="100%" />
            </div>
            <div class="page blue right flipped"> 
                <img src = "../images/page-4.jpg" width="100%" height="100%" />
            </div>
            <div class="page green left"> 
                <img src = "../images/page-5.jpg" width="100%" height="100%" />
            </div>
            <div class="page blue right flipped"> 
                <img src = "../images/page-6.jpg" width="100%" height="100%" />
            </div>
            <div class="page green left">
                <img src = "../images/page-7.jpg" width="100%" height="100%" />
            </div>
            <div class="page blue right flipped">
                <img src = "../images/page-8.jpg" width="100%" height="100%" />
            </div>
            <div class="page green left ">
                <img src = "../images/page-9.jpg" width="100%" height="100%" />
            </div>
            <div class="page blue right flipped">
                <img src = "../images/page-10.jpg" width="100%" height="100%" />
            </div>
            <div class="page green left">
                <img src = "../images/page-11.jpg" width="100%" height="100%" />
            </div>
            <div class="page blue right flipped">
                <img src = "../images/page-12.jpg" width="100%" height="100%" />
            </div>
        </div>
    </div>
    <script src="../bundle.js"></script>
</body>

</html>

...使用样式加载器，babel转发器和每个webpack.config.js的一些加载器在webpack-dev-server上提供：

const debug = process.env.NODE_ENV !== 'production';

const webpack = require('webpack');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

module.exports = {
    context: __dirname,
    devtool: debug ? 'inline-sourcemap' : null,
    entry: [`${__dirname}/lib/script.js`],
    output: {
        path: `${__dirname}/dist`,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, exclude: ['/node_modules/', '/js/', '/svg/'], loader: 'style-loader!css-loader!postcss-loader!' },
            { test: /\.(png|jpe?g|gif|svg)$/, loader: 'url-loader?limit=8192' },
            { test: /\.js$/, exclude: ['/node_modules/', '/css/'], loader: 'babel-loader' },
            { test: /\.(html|htm)$/, loader: 'html-loader' },
        ]
    },
    postcss: function() {
        return [precss, autoprefixer];
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
};

然后在输入文件：[${__dirname}/lib/script.js]我有：

import '../css/style.css';

import '../html/index.html';

import 'babel-polyfill';

css导入可以正常使用其中的背景图片，但不会提供html内的图片。我想我现在正在和webpack合作！

如何提供HTML页面的常规图像？ o_O

如何使用webpack在html中加载图像？

0 个答案: