Question

我已经能够编译＆＃34; es6标准＆＃34;使用一个入口点将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，这就是将你在bundle中拥有的任何文本带到一个单独的文件中。

另外，因为我知道你想要从包中移动图像和字体文件，所以我继续添加用于提取图像/字体的测试，对于那些你需要安装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.

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

1 个答案: