javascript - Webpack 迁移(1.13 -> 3.5)

Question

我正在尝试将我的 webpack conf 从 v1.13 更新到 3.5，但我不能，我也不知道出了什么问题，我一直在关注此链接 (https://webpack.js.org/guides/migrating/)，但我仍然有错误

webpack.server.js

var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var deepmerge = require('deepmerge');
var webpackCommonConfig = require('./webpack.common');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

var sourceMapSupportModule = "require('source-map-support').install({environment: 'node'});\n\n";

var output = { path: path.join(process.cwd(), 'tmp'), filename: 'bundle.js' };

if (process.env.NO_OUTPUT_PATH) {
  output = { filename: 'server.js' };
}

var debug = false;
if (process.env.DEBUG_MODE) {
  console.log('THIS IS DEBUG MODE');
  debug = true;
}

var loaders = webpackCommonConfig.module.loaders.concat();
loaders.push({ test: /\.scss$/, loader: 'null-loader' });

delete webpackCommonConfig.module;

module.exports = deepmerge({
  devtool: 'source-map',
  entry: [
    './server/server.babel.js'
  ],
  output: output,
  target: 'node',
  module: {
    rules: loaders
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({ options: { context: __dirname }  }),
    new webpack.BannerPlugin({banner: 'require("source-map-support").install();', raw: true, entryOnly: true, debug: debug}),
    new webpack.NoErrorsPlugin({debug: debug}),
    new webpack.DefinePlugin({__CLIENT__: false, __SERVER__: true, __PRODUCTION__: false, __DEV__: true, "process.env.NODE_ENV": '"' + process.env.NODE_ENV + '"', debug: debug}),
    new webpack.IgnorePlugin(/vertx/)
  ],
  externals: nodeModules
}, webpackCommonConfig);

webpack.client.js

var path = require('path');
var rtlcss = require('rtlcss');
var webpack = require('webpack');
var deepmerge = require('deepmerge');
var blessPlugin = require('bless-webpack-plugin');
var webpackCommonConfig = require('./webpack.common');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var isProduction = process.env.NODE_ENV === 'production';

var sourceMap = false;

if (process.env.SOURCEMAP === 'true') {
  sourceMap = true;
}

var wds = {
  hostname: process.env.WP_HOST || "localhost",
  port: process.env.WP_PORT || 8079
};

var wdsPath = "http://" + wds.hostname + ":" + wds.port;
var publicPath = wdsPath + "/assets/";

var devtool = '';
var entry = {
  'app': ['./src/main.js'],
  'main': ['./src/sass/main.scss'],
  'plugins': ['./src/plugins.js']
};

var plugins = [
  new webpack.LoaderOptionsPlugin({ options: { context: __dirname }  }),
  new webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false, __PRODUCTION__: isProduction, __DEV__: !isProduction, "process.env.NODE_ENV": '"'+process.env.NODE_ENV+'"', __DEVTOOLS__: true, debug: true }),
  new webpack.IgnorePlugin(/vertx/)
];

if (process.env.EXTRACT_TEXT_PLUGIN === 'true') {
  plugins.unshift(new ExtractTextPlugin('css/[name].css'));
  plugins.unshift(blessPlugin({ imports: true, compress: true }));
}

if (isProduction) {
  plugins.unshift(new webpack.optimize.UglifyJsPlugin({
    mangle: false,
    compress: {
      unused: false,
      warnings: false
    },
    minimize: true,
    sourceMap: sourceMap
  }));
} else {
  plugins.unshift(new webpack.HotModuleReplacementPlugin());
}

function getStyleLoader(prefixer) {
  var s = '';

  if (sourceMap) s = 'sourceMap';

  if (process.env.EXTRACT_TEXT_PLUGIN === 'false') {

    return [
      'style-loader',
      'css-loader?-minimize&importLoaders=1&root=../../public&' + s,
      'postcss-loader?pack='+prefixer,
      'sass-loader?' + s
    ];
  }

  return [
    ExtractTextPlugin.loader({
      extract: true,
      omit: 1
    }),
    'style-loader',
    'css-loader?-minimize&importLoaders=1&' + s,
    'postcss-loader?pack='+prefixer+'&' + s,
    'sass-loader?' + s
  ];
}

devtool = sourceMap ? 'source-map' : '';

if (!isProduction) {
  for (var key in entry) {
    if (entry.hasOwnProperty(key)) {
      entry[key].push("webpack/hot/only-dev-server");
    }
  }
  entry.app.unshift("react-hot-loader/patch");
  entry.devServerClient = "webpack-dev-server/client?" + wdsPath;
}

var loaders = webpackCommonConfig.module.loaders.concat();
// ltr/rtl loaders
loaders.push({ test: function(absPath) {
  if (absPath.search('.scss') !== -1) {
    return true;
  }
  return false;
}, loaders: getStyleLoader('normalprefixer') });

// script loader for plugins.js
var pluginLoaders = ['script'];
if (isProduction) {
  pluginLoaders.push('uglify');
}
loaders.push({
  test: /(\/|\\)public(\/|\\)(.*?)\.js$/,
  loaders: pluginLoaders
});

delete webpackCommonConfig.module;

module.exports = deepmerge({
  cache: true,
  devtool: devtool,
  entry: entry,
  module: {
    rules: loaders
  },
  devServer: {
    proxy: {'**': wdsPath},
    publicPath: publicPath,
    hot:        true,
    inline:     false,
    lazy:       false,
    quiet:      true,
    noInfo:     true,
    headers:    { "Access-Control-Allow-Origin": "*" },
    stats:      { colors: true },
    host:       wds.hostname,
    port:       wds.port
  },
  output: {
    path: path.join(process.cwd(), 'public'),
    publicPath: isProduction ? '/' : publicPath,
    chunkFilename: 'js/[name].js',
    filename: 'js/[name].js',
  },
  plugins: plugins,
}, webpackCommonConfig);

webpack.common.js

module.exports = {
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules|bower_components/,
        loader: 'babel-loader'
      },
      {
        test: /\.txt$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'raw-loader'
      },
      {
        test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/,
        loaders: ["file-loader?context=public&name=/[path][name].[ext]"],
        exclude: /node_modules/
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff&name=./fonts/[hash].[ext]"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff&name=./fonts/[hash].[ext]"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=./fonts/[hash].[ext]"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader&name-loader=./fonts/[hash].[ext]"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=./fonts/[hash].[ext]"
      },
    ]
  },
  // last fix for request
  node: {
    net: "empty",
    tls: "empty",
    fs: "empty"
  },
  resolve: {
    modules: [
      "src",
      "public",
      "node_modules"
    ],
    extensions: [".json", ".js"]
  }
};

包.json

"dev": "rimraf tmp && concurrently --kill-others \"npm run watch-build-server\" \"npm run hot:client\" \"npm run dev:server:wait\"",
"watch-build-server": "run-s clean:tmp hot:server",
"hot:client": "cross-env NODE_ENV=development EXTRACT_TEXT_PLUGIN=false webpack-dev-server --config tools/webpack.client.js",
"dev:server:wait": "just-wait -p \"tmp/bundle.js\" --timeout 120 && npm run start-watcher",
"start-watcher": "npm-watch"

错误是这样的:

[1] resolve failed for "pn": Error: Cannot find module 'pn'
[1] resolve failed for "npm-watch": Error: Cannot find module 'npm-watch'
[1] node_modules/nan
[0] resolve failed for "pn": Error: Cannot find module 'pn'
[0] resolve failed for "npm-watch": Error: Cannot find module 'npm-watch'
[1] resolve failed for "@types": Error: Cannot find module '@types'
[0] node_modules/nan
[0] resolve failed for "@types": Error: Cannot find module '@types'
[1] resolve failed for "eslint-module-utils": Error: Cannot find module 'eslint-module-utils'
[0] resolve failed for "eslint-module-utils": Error: Cannot find module 'eslint-module-utils'
[1]
[1]   error: unknown option `--config'
[1]
[0]
[0]   error: unknown option `--colors'
[0]
[1] npm run hot:client exited with code 1
--> Sending SIGTERM to other processes..
[0] npm run watch-build-server exited with code 1
[2] npm run dev:server:wait exited with code null

知道哪里出了问题吗？

Answer 1

我通过迁移到 v2 并从那里迁移到 v3 对其进行了更新

npm install -g webpack-cli
webpack-cli 迁移 [FILE_PATH].js