javascript - webpack 以与其他 js 文件相同的方式解析 node_modules

Question

我已经接管了一个使用 webpack 的项目，我不太了解它是如何组合在一起的，但是当我将代码从项目移到 npm 包中时遇到问题 - 我们正在尝试制作一些 js npm 包，以便我们可以在多个项目中重用它们。

这是一个示例 - 如果我的项目中有以下代码:

const combinedFilters = {
  ...currentFilters,
  ...filters,
};

这将毫无问题地进行编译，但如果我将其移动到 npm 包中，则会收到以下错误:

Module parse failed: C:\Code Team Services\Web\SiteFiles\src\node_modules\@private\search\filter\SearchBaseFilter.js Unexpected token(31: 6)
You may need an appropriate loader to handle this file type.
|     // Combine new filters with old filters.
|     const combinedFilters = {
|       ...currentFilters,
|       ...filters,
|     };

This is my webpack config - is there something I can add (or remove) in here to make the loader parse npm packges too?

/* eslint-disable func-names, no-useless-escape, object-shorthand */

// modules
const merge = require('webpack-merge');
const path = require('path');
const webpack = require('webpack');

// webpack plugins
const AssetsPlugin = require('assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;

// load base configuration.
const baseConfig = require('./webpack.config');

// Get paths.
const paths = require('../core/paths');

module.exports = merge.smart(baseConfig, {
  cache: true,
    // Enable sourcemaps - see https://webpack.js.org/configuration/devtool/
    // Also see the point about using Uglify in combination with devtool and webpack
    // To disable sourcemaps comment out the line below
  devtool: 'source-map',

  // Define the entry points - each of these creates a new file.
  entry: {
    critical: ['sass/critical.scss'],
    styleguide: ['sass/styleguide.scss'],
    main: [
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client?reload=true',
      'sass/main.scss',
      'js/main',
    ],
  },

  module: {
    rules: [
      {
        test: /\.(eot|ttf|woff|woff2)(\?.+)?$/,
        // Use the file-loader to include referenced fonts in dist folder.
        use: ['file-loader'],
      },
      {
          test: /\.(jpeg|jpg|gif|png|svg)(\?.+)?$/,
          use: [
            {
                // Use the url-loader to convert images to Data URIs.
                loader: 'url-loader',
                options: { limit: 10000 },
            },
            //{
            //    // Use the image-webpack-loader to optimize images and reduce overall file size.
            //    loader: 'image-webpack-loader',
            //},
          ],
      }
    ],
  },

  output: {
    // Define file naming convention - chunkhash is used to bypass the browser cache.
    chunkFilename: '[name].js',
    filename: '[name].js',

    // Define where generated assets will be located.
    path: paths.dist,

    // Define URL for output file path (as above).
    publicPath: paths.mvcAppPath + '/sitefiles/dist/',
  },

  plugins: [
    // Remove existing assets from dist folder.
    new CleanWebpackPlugin([paths.dist], {
      exclude: ['.gitignore', 'fallback'],
      root: paths.sitefiles,
    }),
    // Create JSON file containing the names of generated assets - used by styleguide and MVC site.
    new AssetsPlugin({
      filename: 'assets.json',
      path: paths.dist,
    }),
    // Reduce number of locales loaded by Moment JS.
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
    // Define constants to be accessed in source code.
    new webpack.DefinePlugin({
      // The Google Maps API key.
      GOOGLE_MAPS_API_KEY: JSON.stringify(''),
      // The URL prefix for local API calls.
      URL_VIRTUAL_PATH: JSON.stringify(paths.mvcAppPath),
      // This enables production mode on some modules.
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      },
    }),
    // Use the ExtractTextPlugin to move CSS to a separate file.
    new ExtractTextPlugin({
      allChunks: true,
      disable: false,
      filename: '[name].css',
    }),
    // Write bundle statistics to file for analysis and debugging tools.
    new StatsWriterPlugin({
      transform(data, opts) {
        const stats = opts.compiler.getStats().toJson({ chunkModules: true });
        return JSON.stringify(stats, null, 2);
      },
    }),
    // Enable HMR (https://webpack.js.org/guides/hot-module-replacement/).
    new webpack.HotModuleReplacementPlugin(),
    // Do not write files to disk when errors occur during bundling.
    new webpack.NoEmitOnErrorsPlugin(),
  ],
});

这是基本的 webpack 配置:

/* eslint-disable func-names, no-useless-escape, object-shorthand */

// webpack plugins
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Get paths.
const paths = require('../core/paths');

const baseConfig = {
  // These modules will be loaded outside of webpack e.g. via a CDN.
  externals: {
    jquery: 'jQuery',
  },

  // Define which loaders will be used for different file extensions.
  module: {
    rules: [{
        test: /\.html$/,
        use: [
          // Use the html-loader to parse and minify HTML imports.
          'html-loader',
        ],
      },
      {
        test: /\.js$/,
        use: [{
          // Use the eslint-loader to validate the JS files before bundling.
          loader: 'eslint-loader',
          options: {
            ignorePath: paths.eslintIgnore
          },
        }, ],
        enforce: 'pre',
        include: [paths.js],
        exclude: [paths.vendor],
      },
      {
        test: /\.js$/,
        use: [{
          // Use the babel-loader to transpile the JS to browser-compatible syntax.
          loader: 'babel-loader',
        }],
        include: [paths.js],
        exclude: [paths.vendor],
      },
      {
        test: /\.(css|scss)$/,
        // Use the ExtractTextPlugin to move CSS to a separate file.
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
              // Use the css-loader to parse and minify CSS imports.
              // N.B Sourcemaps enabled, but wont be output if devtool setting is commented out
              loader: 'css-loader',
              options: {
                autoprefixer: false,
                sourceMap: true
              },
            },
            {
              // Use the postcss-loader to add vendor prefixes via autoprefixer.
              // N.B Sourcemaps enabled, but wont be output if devtool setting is commented out
              loader: 'postcss-loader',
              options: {
                config: {
                  path: paths.postcssConfig
                },
                sourceMap: true
              },
            },
            {
              // Use the sass-loader to parse and minify CSS imports.
              // N.B Sourcemaps enabled, but wont be output if devtool setting is commented out
              loader: 'sass-loader?sourceMap',
              options: {
                sourceMap: true
              },
            },
          ],
          publicPath: paths.mvcAppPath + '/sitefiles/dist/',
        }),
      },
      {
        test: /loadcss\.js$/,
        use: [
          // Shim fg-loadcss to access the window object.
          'imports-loader?exports=>undefined',
          'exports-loader?window.loadCSS',
        ],
        exclude: [paths.js],
        include: /fg-loadcss/,
      },
      {
        test: /cssrelpreload\.js$/,
        use: [
          // Shim fg-loadcss to access the window object.
          'imports-loader?this=>window',
        ],
        exclude: [paths.js],
        include: /fg-loadcss/,
      },
      {
        test: /waypoints\.js$/,
        use: [
          // Shim waypoints to access the window object.
          'exports-loader?window.Waypoint',
        ],
        exclude: [paths.js],
        include: /waypoints/,
      },
      {
        test: /\.js$/,
        use: [
          // Shim videojs to force correct module syntax.
          'imports-loader?this=>window&exports=>false&define=>false',
        ],
        exclude: [paths.js],
        include: /video\.js/,
      },
      {
        test: /\.js$/,
        use: [
          // Shim videojs to force correct module syntax.
          'imports-loader?this=>window&exports=>false&define=>false',
        ],
        exclude: [paths.js],
        include: /videojs-youtube/,
      },
    ],

    noParse: [
      // Ignore prebuilt warning for videojs
      /[\/\\]video\.js$/,
      /[\/\\]video\.min\.js$/,
      /[\/\\]videojs-youtube/,
    ],
  },

  resolve: {
    alias: {
      // Add aliases for common source folders.
      fonts: paths.fonts,
      img: paths.img,
      js: paths.js,
      sass: paths.sass,
      vendor: paths.vendor,

      // Add aliases for vendor modules.
      'loadcss-core': 'fg-loadcss/src/loadcss',
      'loadcss-polyfill': 'fg-loadcss/src/cssrelpreload',
      'videojs-core': 'video.js/dist/video.js',
      'videojs-youtube': 'videojs-youtube/dist/Youtube',
      'waypoints-core': 'waypoints/lib/jquery.waypoints.js',
      'waypoints-infinite': 'waypoints/lib/shortcuts/infinite.js',
      'waypoints-inview': 'waypoints/lib/shortcuts/inview.js',
      'waypoints-sticky': 'waypoints/lib/shortcuts/sticky.js',
    },
  },
};

module.exports = baseConfig;

Answer 1

问题是 node_modules 通常被排除在 webpack 配置中。在您的情况下，它可能包含在被排除的 paths.vendor 变量中。仍应包含的路径可以添加到包含选项中(在您的情况下，它包含 paths.js 的值)。

参见https://webpack.js.org/configuration/module/#rule-exclude和 https://webpack.js.org/configuration/module/#rule-include .

请注意值 can also be an array ，因此您可以保留配置不变，只需向数组添加其他包含路径或条件即可。