Webpack 升级 - 未找到模块：无法解析 node_modules
Webpack Upgrade - Module not found: Can't resolve node_modules
我目前正在从 Webpack 1 升级到 2，然后再升级到 3。在这次升级中，我按照 1 => 2 and for 2 => 3 的说明遵守了迁移说明。
我遇到的问题是 node_modules 中安装的软件包中的 none 似乎在 client/app/bundles 中的代码中得到了解决。我得到的所有 node_modules 的错误都在以下结构中：
ERROR in ./node_modules/alt/lib/store/StoreMixin.js ||
Module not found: Error: Can't resolve 'transmitter' in 'client/node_modules/alt/lib/store'
我的理论是 file-loader、expose-loader 或 imports-loader 版本不匹配，因为如果没有正确的版本，模块就不会进口。我确保所有 module.rules 都有以 -loader 模式结尾的加载器。 yarn install 也成功无误。
我的依赖和webpack配置如下：
Package.json
"dependencies": {
"ajv": "^5.1.5",
"alt": "^0.17.8",
"alt-container": "^1.0.2",
"autoprefixer": "^6.4.0",
"axios": "^0.7.0",
"babel-cli": "^6.10.1",
"babel-core": "^6.3.26",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-decorators": "^6.3.13",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-types": "^6.4.5",
"body-parser": "^1.14.1",
"chai": "^3.4.1",
"chai-enzyme": "^0.6.1",
"css-loader": "^0.23.1",
"enzyme": "^2.5.0",
"es5-shim": "^4.1.14",
"es6-promise": "^3.0.2",
"expose-loader": "^0.7.1",
"fbjs": "^0.8.16",
"file-loader": "^1.1.5",
"fixed-data-table-2": "^0.7.11",
"immutable": "^3.7.5",
"imports-loader": "^0.6.5",
"jade": "^1.11.0",
"jquery": "^2.1.4",
"jquery-ujs": "^1.1.0-1",
"jsdom": "^7.0.2",
"loader-utils": "^0.2.11",
"lodash": "^4.11.1",
"lodash-uuid": "^0.0.3",
"mocha-jsdom": "^1.0.0",
"moment": "^2.11.1",
"postcss-loader": "^0.10.1",
"react": "^15.6.1",
"react-addons-test-utils": "15.4.0",
"react-bootstrap": "^0.30.3",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.0.0",
"react-dnd-test-backend": "^1.0.0",
"react-dom": "^15.6.1",
"react-fa": "^4.1.2",
"react-height": "^3.0.0",
"react-json-tree": "^0.10.9",
"react-on-rails": "10.0.0",
"react-onclickoutside": "^5.7.0",
"react-overlays": "^0.6.2",
"react-select": "^1.0.0-rc.3",
"react-table": "^6.0.5",
"react-textarea-autosize": "^4.0.5",
"sass-loader": "^6.0.6",
"sinon": "^1.17.2",
"sinon-chai": "^2.8.0",
"sleep": "^3.0.0",
"source-map": "^0.6.1",
"uglify-js": "^2.8.29",
"url-loader": "^0.5.6",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.9.2"
},
"devDependencies": {
"babel-eslint": "^6.1.0",
"babel-istanbul": "^0.11.0",
"babel-plugin-react-transform": "^2.0.0",
"bootstrap-loader": "^2.0.0",
"bootstrap-sass": "^3.3.6",
"eslint": "^3.3.0",
"eslint-config-airbnb": "^10.0.1",
"eslint-config-shakacode": "^0.0.1",
"eslint-plugin-import": "^1.13.0",
"eslint-plugin-jsx-a11y": "^2.1.0",
"eslint-plugin-react": "^6.0.0",
"esprima-fb": "^15001.1001.0-dev-harmony-fb",
"express": "^4.13.3",
"extract-text-webpack-plugin": "3.0.1",
"image-webpack-loader": "^3.1.0",
"mocha": "^2.3.3",
"mocha-jenkins-reporter": "^0.1.9",
"mocha-jsdom": "^1.0.0",
"node-sass": "4.0.0",
"react-loadable": "^5.3.0",
"react-transform-hmr": "^1.0.1",
"resolve-url-loader": "^1.4.3",
"style-loader": "^0.19.0",
"stylelint": "^7.1.0",
"stylelint-config-standard": "^12.0.0"
}
文件结构
webpack.client.rails.config.js
app
/assets
/javascripts
/generated
-- app-bundle.js
-- vendor-bundle.js
client
/app
/bundles
/[APP ENTRY]...
/node_modules
webpack.client.rails.config.js
webpack.client.base.config.js
webpack.client.rails.config.js
const webpack = require('webpack');
const path = require('path');
const config = require('./webpack.client.base.config');
const devBuild = process.env.NODE_ENV !== 'production';
const autoprefixer = require('autoprefixer');
config.output = {
filename: '[name]-bundle.js',
path: path.resolve('../app/assets/javascripts/generated'),
publicPath: path.resolve('/assets/generated/'),
};
config.entry.vendor.unshift(
'es5-shim/es5-shim',
'es5-shim/es5-sham'
);
config.entry.vendor.push('jquery-ujs');
config.module.rules.push(
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: require.resolve('react'),
loader: 'imports-loader?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham',
},
{
test: require.resolve('jquery-ujs'),
loader: 'imports-loader?jQuery=jquery',
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [autoprefixer]
}
}
},
'sass-loader',
],
exclude: /assets\/stylesheets\/common\/packages\/DocumentEditor/,
},
{
test: /\.scss$/,
use: [
'style-loader?{"singleton":true,"attrs":{"id":"document-content-stylesheet"}}',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [autoprefixer]
}
}
},
'sass-loader',
],
include: /assets\/stylesheets\/common\/packages\/DocumentEditor/,
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
}
);
module.exports = config;
if (devBuild) {
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
module.exports.devtool = 'eval-source-map';
} else {
config.plugins.push(
new webpack.optimize.DedupePlugin()
);
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}
webpack.client.base.config.js
const webpack = require('webpack');
const path = require('path');
const aliases = require('./aliases');
const devBuild = process.env.NODE_ENV !== 'production';
const nodeEnv = devBuild ? 'development' : 'production';
module.exports = {
context: __dirname,
entry: {
vendor: [
'babel-polyfill',
'jquery',
],
app: [
'./app/bundles/BundleOne/startup/clientRegistration',
'./app/bundles/BundleTwo/startup/clientRegistration',
'./app/bundles/BundleThree/startup/clientRegistration',
'./app/bundles/BundleFour/startup/clientRegistration',
'./app/bundles/BundleFive/startup/clientRegistration',
'./app/bundles/BundleSix/startup/clientRegistration',
'./app/bundles/BundleSeven/startup/clientRegistration',
],
},
resolve: {
modules: [
path.resolve('./app/bundles'),
],
extensions: ['.js', '.jsx'],
alias: aliases,
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv),
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor-bundle.js',
minChunks: Infinity,
}),
],
module: {
rules: [
{ test: require.resolve('jquery'), loader: 'expose-loader?jQuery' },
{ test: require.resolve('jquery'), loader: 'expose-loader?$' },
],
},
};
我认为问题在于当您在 webpack.client.base.config.js 中设置以下选项时：
resolve: {
modules: [
path.resolve('./app/bundles'),
],
extensions: ['.js', '.jsx'],
alias: aliases,
},
您覆盖了默认的解析模块选项
resolve: { modules: ['node_modules'] }.
如果你想让 webpack 在你的 bundles 文件夹和你的 node modules 文件夹中找到模块，你应该尝试如下操作：
resolve: {
modules: [
path.resolve('./app/bundles'),
'node_modules'
],
extensions: ['.js', '.jsx'],
alias: aliases,
},
编辑：此外，如果您尝试升级到 webpack 2，则不应查看 webpack 1 文档。请参阅 the latest documentation。
我目前正在从 Webpack 1 升级到 2，然后再升级到 3。在这次升级中，我按照 1 => 2 and for 2 => 3 的说明遵守了迁移说明。
我遇到的问题是 node_modules 中安装的软件包中的 none 似乎在 client/app/bundles 中的代码中得到了解决。我得到的所有 node_modules 的错误都在以下结构中：
ERROR in ./node_modules/alt/lib/store/StoreMixin.js || Module not found: Error: Can't resolve 'transmitter' in 'client/node_modules/alt/lib/store'
我的理论是 file-loader、expose-loader 或 imports-loader 版本不匹配，因为如果没有正确的版本，模块就不会进口。我确保所有 module.rules 都有以 -loader 模式结尾的加载器。 yarn install 也成功无误。
我的依赖和webpack配置如下：
Package.json
"dependencies": {
"ajv": "^5.1.5",
"alt": "^0.17.8",
"alt-container": "^1.0.2",
"autoprefixer": "^6.4.0",
"axios": "^0.7.0",
"babel-cli": "^6.10.1",
"babel-core": "^6.3.26",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-decorators": "^6.3.13",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-types": "^6.4.5",
"body-parser": "^1.14.1",
"chai": "^3.4.1",
"chai-enzyme": "^0.6.1",
"css-loader": "^0.23.1",
"enzyme": "^2.5.0",
"es5-shim": "^4.1.14",
"es6-promise": "^3.0.2",
"expose-loader": "^0.7.1",
"fbjs": "^0.8.16",
"file-loader": "^1.1.5",
"fixed-data-table-2": "^0.7.11",
"immutable": "^3.7.5",
"imports-loader": "^0.6.5",
"jade": "^1.11.0",
"jquery": "^2.1.4",
"jquery-ujs": "^1.1.0-1",
"jsdom": "^7.0.2",
"loader-utils": "^0.2.11",
"lodash": "^4.11.1",
"lodash-uuid": "^0.0.3",
"mocha-jsdom": "^1.0.0",
"moment": "^2.11.1",
"postcss-loader": "^0.10.1",
"react": "^15.6.1",
"react-addons-test-utils": "15.4.0",
"react-bootstrap": "^0.30.3",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.0.0",
"react-dnd-test-backend": "^1.0.0",
"react-dom": "^15.6.1",
"react-fa": "^4.1.2",
"react-height": "^3.0.0",
"react-json-tree": "^0.10.9",
"react-on-rails": "10.0.0",
"react-onclickoutside": "^5.7.0",
"react-overlays": "^0.6.2",
"react-select": "^1.0.0-rc.3",
"react-table": "^6.0.5",
"react-textarea-autosize": "^4.0.5",
"sass-loader": "^6.0.6",
"sinon": "^1.17.2",
"sinon-chai": "^2.8.0",
"sleep": "^3.0.0",
"source-map": "^0.6.1",
"uglify-js": "^2.8.29",
"url-loader": "^0.5.6",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.9.2"
},
"devDependencies": {
"babel-eslint": "^6.1.0",
"babel-istanbul": "^0.11.0",
"babel-plugin-react-transform": "^2.0.0",
"bootstrap-loader": "^2.0.0",
"bootstrap-sass": "^3.3.6",
"eslint": "^3.3.0",
"eslint-config-airbnb": "^10.0.1",
"eslint-config-shakacode": "^0.0.1",
"eslint-plugin-import": "^1.13.0",
"eslint-plugin-jsx-a11y": "^2.1.0",
"eslint-plugin-react": "^6.0.0",
"esprima-fb": "^15001.1001.0-dev-harmony-fb",
"express": "^4.13.3",
"extract-text-webpack-plugin": "3.0.1",
"image-webpack-loader": "^3.1.0",
"mocha": "^2.3.3",
"mocha-jenkins-reporter": "^0.1.9",
"mocha-jsdom": "^1.0.0",
"node-sass": "4.0.0",
"react-loadable": "^5.3.0",
"react-transform-hmr": "^1.0.1",
"resolve-url-loader": "^1.4.3",
"style-loader": "^0.19.0",
"stylelint": "^7.1.0",
"stylelint-config-standard": "^12.0.0"
}
文件结构
webpack.client.rails.config.js
app
/assets
/javascripts
/generated
-- app-bundle.js
-- vendor-bundle.js
client
/app
/bundles
/[APP ENTRY]...
/node_modules
webpack.client.rails.config.js
webpack.client.base.config.js
webpack.client.rails.config.js
const webpack = require('webpack');
const path = require('path');
const config = require('./webpack.client.base.config');
const devBuild = process.env.NODE_ENV !== 'production';
const autoprefixer = require('autoprefixer');
config.output = {
filename: '[name]-bundle.js',
path: path.resolve('../app/assets/javascripts/generated'),
publicPath: path.resolve('/assets/generated/'),
};
config.entry.vendor.unshift(
'es5-shim/es5-shim',
'es5-shim/es5-sham'
);
config.entry.vendor.push('jquery-ujs');
config.module.rules.push(
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: require.resolve('react'),
loader: 'imports-loader?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham',
},
{
test: require.resolve('jquery-ujs'),
loader: 'imports-loader?jQuery=jquery',
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [autoprefixer]
}
}
},
'sass-loader',
],
exclude: /assets\/stylesheets\/common\/packages\/DocumentEditor/,
},
{
test: /\.scss$/,
use: [
'style-loader?{"singleton":true,"attrs":{"id":"document-content-stylesheet"}}',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [autoprefixer]
}
}
},
'sass-loader',
],
include: /assets\/stylesheets\/common\/packages\/DocumentEditor/,
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
}
);
module.exports = config;
if (devBuild) {
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
module.exports.devtool = 'eval-source-map';
} else {
config.plugins.push(
new webpack.optimize.DedupePlugin()
);
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}
webpack.client.base.config.js
const webpack = require('webpack');
const path = require('path');
const aliases = require('./aliases');
const devBuild = process.env.NODE_ENV !== 'production';
const nodeEnv = devBuild ? 'development' : 'production';
module.exports = {
context: __dirname,
entry: {
vendor: [
'babel-polyfill',
'jquery',
],
app: [
'./app/bundles/BundleOne/startup/clientRegistration',
'./app/bundles/BundleTwo/startup/clientRegistration',
'./app/bundles/BundleThree/startup/clientRegistration',
'./app/bundles/BundleFour/startup/clientRegistration',
'./app/bundles/BundleFive/startup/clientRegistration',
'./app/bundles/BundleSix/startup/clientRegistration',
'./app/bundles/BundleSeven/startup/clientRegistration',
],
},
resolve: {
modules: [
path.resolve('./app/bundles'),
],
extensions: ['.js', '.jsx'],
alias: aliases,
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv),
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor-bundle.js',
minChunks: Infinity,
}),
],
module: {
rules: [
{ test: require.resolve('jquery'), loader: 'expose-loader?jQuery' },
{ test: require.resolve('jquery'), loader: 'expose-loader?$' },
],
},
};
我认为问题在于当您在 webpack.client.base.config.js 中设置以下选项时：
resolve: {
modules: [
path.resolve('./app/bundles'),
],
extensions: ['.js', '.jsx'],
alias: aliases,
},
您覆盖了默认的解析模块选项
resolve: { modules: ['node_modules'] }.
如果你想让 webpack 在你的 bundles 文件夹和你的 node modules 文件夹中找到模块，你应该尝试如下操作：
resolve: {
modules: [
path.resolve('./app/bundles'),
'node_modules'
],
extensions: ['.js', '.jsx'],
alias: aliases,
},
编辑：此外，如果您尝试升级到 webpack 2，则不应查看 webpack 1 文档。请参阅 the latest documentation。