Webpack：不同類型的多個入口點（JS，HTML，LESS，...）

Question

我想使用webpack打包Chrome擴展。爲此，我需要拼湊一堆JS文件，

• background.js，
• popup.js，
• content.js，

和一些HTML和CSS文件，

• popup.html,
• popup.css，
• content.css。

我想我將不得不使用多個項文件，即

module.exports = { 
    entry: { 
    background: './src/scripts/background.js', 
    content: './src/scripts/content.js', 
    popup: './src/scripts/popup.js', 
    html: './src/popup.html', 
    ccss: './src/styles/content.less', 
    pcss: './src/styles/popup.less', 
    }, 
    // ... 
} 

隨着指定的裝載機，如

module: { 
    loaders: [ 
    { test: /\.html$/, loader: 'file-loader' }, 
    { test: /\.less$/, loader: 'style!css!less' }, 
    // ... 
    ], 
} 

不過，我與output掙扎規格。 JS文件捆綁好了，但我希望HTML文件最終也能成爲HTML。隨着標準

output: { 
    path: './build/', 
    filename: '[name].js', 
}, 

這會不會是這種情況，因爲.js是硬編碼。

有沒有什麼方法可以將JS，HTML和CSS入口點分別輸出爲JS，HTML和CSS文件？

Answer 1

您不希望將您的HTML文件包含在webpack包中，這些文件將獨立存在。

至於綁定LESS/CSS，我推薦使用帶有extract text webpack plugin的CSS和LESS裝載機。這可以用來自動捆綁您在JavaScript模塊中導入的LESS/CSS模塊，然後將該CSS捆綁包輸出到您選擇的位置。

所以你webpack.config看起來就像這樣：

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

module.exports = { 
    entry: { 
    background: './src/scripts/background.js', 
    content: './src/scripts/content.js', 
    popup: './src/scripts/popup.js' 
    }, 
    output: { 
    path: './build/', 
    filename: '[name].js', 
    }, 
    loaders: [ 
    { test: /\.less$/, loader: 'style!css!less' }, 
    // ... 
    ], 
    plugins: [ 
    new ExtractTextPlugin('[name].css') 
    ] 
} 

然後在你進入JS，需要你的LESS文件：

你的風格

require('./path/to/style.less'); 

所有將被捆綁./build/styles.css。