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。