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.