Question

我是webpack的新手，所以这可能是愚蠢的。

我目前的文件结构如下

---src
------css
---------colors.sass
---------main.sass
------img
---------img1.png
------js
---------app.js
---------alert.js
---index.html
---test.html
package.json
webpack.config.js

我的webpack.config.js如下

//NPM
var path = require('path');
var webpack = require('webpack');
var _ = require('underscore');

//Plugins
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

var extractPlugin = new ExtractTextPlugin({
    filename: 'main.css'
});

module.exports = {
    entry: {
        app: './src/js/app.js',
        alert: './src/js/alert.js'
    },
    devtool: 'eval',
    devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 8080,
        hot: true,
        noInfo: false,
        inline: true
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash].js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                loaders: ['babel-loader'],
                exclude: /node_modules/,
                include: __dirname
            },
            {
                test: /\.sass$/,
                use: extractPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(jpg|png)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/'
                    }
                }]
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: '/'
                    }
                }],
                exclude: path.resolve(__dirname, 'index.html')
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            chunks: ['app'],
            filename: 'index.html',
            template: './src/index.html'
        }),
        new HtmlWebpackPlugin({
            chunks: ['alert'],
            filename: 'test.html',
            template: './src/test.html'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            _: "underscore"
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            // ...
        }),
        new CleanWebpackPlugin(['dist']),
        extractPlugin
    ]
};

我的package.json脚本

"scripts": {
        "start": "webpack-dev-server --config webpack.config.js --inline --progress --colors",
        "build": "webpack --config webpack.config.js --progress --profile --colors",
        "prod": "webpack -p"
    },

app.js＆amp; alert.js我只是拥有控制台日志。在index.html＆amp; test.html我只有一个基本的HTML5布局和带有页面名称的H1标签。

我希望能够转到index.html并且仅使用app.js并test.html仅使用alert.js

现在，当我运行npm run start时，我会在HTML的正文中显示以下内容。

module.exports = __webpack_public_path__ + "/index.html";

在控制台中，没有错误，但显示来自app.js或alert.js的控制台日志，但HTML不会呈现。知道为什么吗？

Answer 1

您为.html个文件定义了两个不同的规则。

{
    test: /\.html$/,
    use: ['html-loader']
},
{
    test: /\.html$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: '/'
        }
    }],
    exclude: path.resolve(__dirname, 'index.html')
}

这两条规则存在冲突（./index.html除外），您可能会收到不良后果。 html-webpack-plugin还会将任何已配置的加载器应用于模板文件。在您的情况下，它将file-loader应用于它，它复制文件并返回对它的引用（您获得的导出），以便可以在HTML中引用复制的文件。这绝对不是你想要的。最简单的解决方案是删除第二条规则，只保留html-loader。

{
    test: /\.html$/,
    use: ['html-loader']
},

如果您想将file-loader用于任何其他HTML文件，可以通过确保不将配置的加载程序应用于模板来实现。有几个不同的选项，其中一个使用不同的扩展名，如果没有指定加载器，html-webpack-plugin将EJS加载器作为后备应用，您应该使用.ejs。有关其他选项，请参阅The template option。

Webpack HtmlWebpackPlugin不显示页面

我的webpack.config.js如下

我的package.json脚本

1 个答案: