webpack：具有多个文件类型输出的多输入

Question

我已经能够使用一个入口点将“es6标准”js文件编译为原生js，我也可以使用多个条目来编译多个文件。例如：

webpack.config.js

module.exports = { 
    entry: { 
     front: "./static/src/js/Front.js", 
     account: "./static/src/js/Account.js" 
    }, 
    output: { 
     path: "./static/dist", 
     filename: "[name]-bundle.js" 
    } 
}; 

我已经明白使用模块/插件编译其他文件，用多一点点的概念...

modules: { 
    loaders: [ 
     { tests: '/\.(css|scss)$/', loader: 'css-loader|style-loader'} 
    ] 
} 

这些解决方案仅将我的文件编译为JavaScript，包括我的styles (scss, sass, css)。

我正在寻找一个解决方案，我将有两个（或多个）不同的条目文件，每个文件都将生成自己的输出文件（不仅仅是.js）。我不介意有多个配置模块。谢谢...

Answer 1

由于您的代码在SCSS中，您需要SCSS加载器和CSS加载器，您还需要extract-text-webpack-plugin，这就是将包中包含的任何文本导出到单独的文件中。

另外，因为我知道你会想要从包中移动图像和字体文件，我继续添加测试以提取图像/字体，对于那些需要安装file-loader的用户。我希望帮助

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractText = require('extract-text-webpack-plugin'); 

const extractCss= new ExtractText({ filename: 'styles/vendors.css' }); 
const extractSass = new ExtractText({ filename: 'styles/site.css' }); 

module.exports = (env) => { 
    return { 
    entry: { 
     main: path.resolve(__dirname, '../', 'src', 'Front.js'), 
    }, 
    output: { 
     path: path.resolve(__dirname, '../', 'dist'), 
     filename: 'js/[name]-bundle.js', 
    }, 
    module: { 
     rules: [ 
     { test: /\.css/, use: extractCss.extract(['css-loader']) }, 
     { test: /\.scss/, exclude: /node_modules/, use: extractSass.extract(['css-loader', 'sass-loader']) }, 

     { test: /\.(png|jpg)$/, exclude: /node_modules/, use: 'file-loader?outputPath=images/&publicPath=../'}, 
     { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: 'file-loader?outputPath=fonts/&publicPath=../'}, 
     ] 
    }, 
    resolve: { 
     modules: ['node_modules'], 
    }, 
    plugins: [ 
     extractCss, 
     extractSass, 
    ] 
    } 
} 

PS: I am in a hurry out, so I just cooked this up fast, when I come back I will review, in case you find any bugs, just comment below.