我已经接管了一个正在使用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,
| };
这是我的webpack配置-我可以在这里添加（或删除）某些内容，以使加载程序也解析npm打包吗？
/* 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;
答案 0 :(得分：2)
问题是webpack配置中通常不包含node_modules。就您而言，它可能包含在排除的paths.vendor变量中。仍应包含的路径可以添加到include选项（在您的情况下，它包含paths.js的值）。
请参见https://webpack.js.org/configuration/module/#rule-exclude和https://webpack.js.org/configuration/module/#rule-include。
请注意，值为can also be an array，因此您可以保持配置不变，而只需向阵列添加其他包含路径或条件。