angularjs在webpack下使用require引用戶html文件時，出現 module.exports = "\n

緣由猜測：使用html-loader加載了兩次html

好比，錯誤示例：

module: {
        rules: [
            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            {test: /\.ts$/, loader: "ts-loader"},
            {test: /\.(html)$/, loader: "html-loader"},
            {test: /\.html/, loader: "html-loader"}
        ]
    },

則在代碼中看到require('./yunzhi.html')時。首先，因爲符合第一條 {test: /\.(html)$/, loader: "html-loader"},則將html編譯爲變量A -> (module.exports)；而後，因爲再次符合第二條規則{test: /\.html/, loader: "html-loader"}，又從新將A進行了二次編譯，而後就出現了咱們不想看到的。

例子

a.html

<yunzhi></yunzhi>

yunzhi組件

app.component('yunzhi', {
    template: require('./yunzhi.html')
    ...
});

yunzhi.html

<h1>hello</h1>
<h2>hello</h2>

則發生以下錯誤：

解決方案

刪除冗餘的loader
刪除前：

module: {
        rules: [
            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            {test: /\.ts$/, loader: "ts-loader"},
            {test: /\.(html)$/, loader: "html-loader"},
            {test: /\.html/, loader: "html-loader"}
        ]
    },

刪除後：

module: {
        rules: [
            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            {test: /\.ts$/, loader: "ts-loader"},
            {test: /\.(html)$/, loader: "html-loader"},
        ]
    },