Question

我正在尝试更新我的Webpack以允许我拥有多个JS文件，这些文件也作为单独的文件输出。

在我需要使用多个JS文件之前：

  entry: [
        'babel-polyfill',
        './src/js/main.js',
    './src/scss/main.scss',
  ],

  output: {
    path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
    filename: 'assets/js/main.min.js',
  },

这很好用，但现在我已将它更新为多个JS文件的对象，这有效。但babel polyfill显然没有，而我仍然得到一个文件，它也创建了一个scss.min.js

  entry: {
        babel: 'babel-polyfill',
    app: './src/js/main.js',
    banner: './src/js/banner.js',
    scss: './src/scss/main.scss',
  },

  output: {
    path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
    filename: 'assets/js/[name].min.js',
  },

现在应该如何添加babel和scss？

这是我完整的Webpack 2配置：

let webpack = require('webpack');
let path    = require('path');

require("babel-polyfill");

let ExtractTextPlugin       = require('extract-text-webpack-plugin');
let WebpackNotifierPlugin   = require('webpack-notifier');

let inProduction = (process.env.NODE_ENV === 'production');

module.exports = {
  entry: [
        'babel-polyfill',
        './src/js/main.js',
    './src/scss/main.scss',
  ],

  output: {
    path: path.resolve(__dirname, './public/wp-content/themes/designdough/'),
    filename: 'assets/js/main.min.js',
  },
  externals: {
    jquery: 'jQuery'
  },
  module: {
        rules: [
            {
                test: /\.s[ac]ss$/,
                use: ExtractTextPlugin.extract({
                    use: [{
            loader: 'css-loader',
                        options: {
              url: false,
              minimize: true,
              sourceMap: true,
                        }
                    },
                    'sass-loader'
                ],
                fallback: 'style-loader'
            })
        },

            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('style.css'),

        new webpack.LoaderOptionsPlugin({
            minimize: inProduction
        }),

        new WebpackNotifierPlugin({
            title: "WP Theme",
            contentImage: path.resolve("./public/favicon.ico"),
            alwaysNotify: true,
        })
    ]
};

if (inProduction) {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin()
    )
}

上一个输出：

assets/js/main.min.js   987 kB       0  [emitted]
            style.css  86.2 kB       0  [emitted]

立即输出：

 assets/js/babel.min.js   264 kB       0  [emitted]  babel
   assets/js/app.min.js   726 kB       1  [emitted]  app
assets/js/banner.min.js  93.5 kB       2  [emitted]  banner
  assets/js/scss.min.js  2.52 kB       3  [emitted]  scss
              style.css  86.2 kB       3  [emitted]

Answer 1

应该是这样的：

entry: {
    vendor: [
       'babel-polyfill' // put all your vendor in this
    ]
    app: './src/js/main.js',
    banner: './src/js/banner.js',
    // scss: './src/scss/main.scss', // remove this
  },

请参阅document。入口点仅用于js文件。

ExtractTextPlugin将从js文件中提取css。

Webpack 2多个js条目以及babel和scss

1 个答案: