javascript - 如何将 aurelia 版本从 webpack1 升级到 webpack3？

Question

当我尝试升级 package.json 文件中的 javascript 库，并更新 web.configi.js 以符合 3.4.1 中的新 webpack 配置时，它不起作用。许多文件没有像 webpack1 那样写入输出。

我在 github 上提出了 extract-text-webpack-plugin 的问题。 https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/600

有人告诉我这是一个更好的提问地点。

这是 webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var path = require('path');

var config = require('./project.build.config.js');

var filesToCopy = [];

//create list of index.html files to be copied to wwwroot
config.apps.forEach(app => {
  filesToCopy.push({ from: app.src + '.html', to: config.outDir + app.dest });
});

config.assets.forEach(asset => {
  filesToCopy.push(asset);
});


var plugins = [

  new CleanPlugin(config.outDir),

  new AureliaWebpackPlugin.AureliaPlugin({ aureliaApp: undefined }),

  new webpack.optimize.CommonsChunkPlugin({
    name: "commons",
    // (the commons chunk name)

    filename: "commons.js",
    // (the filename of the commons chunk)

    minChunks: 3,
    // (Modules must be shared between 3 entries)

    // chunks: ["pageA", "pageB"],
    // (Only use these entries)
  }),

  new webpack.optimize.CommonsChunkPlugin({
    name: 'commons',
    filename: 'commons.js'
  }),

  new ExtractTextPlugin({
    disable: false,
    filename: '[name].css',
    allChunks: true
  }),

  new CopyWebpackPlugin(filesToCopy, { copyUnmodified: false }),

  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
  }),
];

// create the apps entry points
var entryPoints = {};
config.apps.forEach(app => {
  entryPoints[app.name] = ['materialize-loader!./materialize.config.js', 'babel-polyfill', 'whatwg-fetch', 'aurelia-bootstrapper'];
});

var webpackBaseConfig = {

  entry: entryPoints,

  output: {
    path: config.outDir,
    chunkFilename: '[name]-[chunkhash].js',
    filename: '[name].js'
  },

  plugins: plugins,

  resolve: {
    extensions: ['.js'],
    modules: ['src', 'node_modules'],
    alias: {
      '$': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js'),
      'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js')
    }
  },

  module: {
    rules: [{
        test: /\.js$/i,
        loaders: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [
            ['env', { loose: true, modules: true }]
          ],
          plugins: ['transform-class-properties', 'transform-decorators-legacy']
        }
      },
      {
        test: /\.css$/i,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        }),
      },
      {
        test: /\.scss$/i,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.html?$/i,
        use: 'html-loader'
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml"
      }, {
        test: /\.(png|gif|jpe|ico)$/i,
        loader: 'file-loader?limit=10000'
      }
    ]
  },
};

module.exports = webpackBaseConfig;

这是安装的软件包

      "aurelia": {
    "build": {
      "moduleRootOverride": {
        "aurelia-templating-resources": "dist/commonjs"
      },
      "resources": [
        "aurelia-validation/validate-binding-behavior",
        "aurelia-validation/validation-errors-custom-attribute",
        "aurelia-validation/validation-renderer-custom-attribute",
        "aurelia-dialog",
        "aurelia-validation"
      ]
    }
  },
  "devDependencies": {
    "aurelia-loader-nodejs": "1.0.1",
    "aurelia-pal-nodejs": "1.0.0-beta.1.0.0",
    "aurelia-protractor-plugin": "1.0.5",
    "aurelia-testing": "1.0.0-beta.3.0.1",
    "aurelia-tools": "1.0.0",
    "aurelia-webpack-plugin": "2.0.0-rc.3",
    "autoprefixer": "7.1.2",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.1",
    "babel-plugin-istanbul": "4.1.4",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-polyfill": "6.23.0",
    "babel-preset-env": "1.6.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-stage-1": "6.24.1",
    "babel-register": "6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "copy-webpack-plugin": "4.0.1",
    "cross-env": "5.0.4",
    "css-loader": "0.28.4",
    "eslint": "4.4.1",
    "eslint-friendly-formatter": "^3.0.0",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "html-webpack-plugin": "2.30.1",
    "http-server": "0.10.0",
    "ip": "1.1.5",
    "isparta": "4.0.0",
    "jasmine-core": "2.7.0",
    "jest": "20.0.4",
    "jest-cli": "20.0.4",
    "json-loader": "0.5.7",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage": "1.1.1",
    "karma-jasmine": "1.1.0",
    "karma-mocha-reporter": "2.2.3",
    "karma-webpack": "2.0.4",
    "node-sass": "4.5.3",
    "nps": "5.7.0",
    "nps-utils": "1.3.0",
    "postcss-loader": "2.0.6",
    "protractor": "5.1.2",
    "replace": "0.3.0",
    "sass-loader": "^6.0.6",
    "strip-loader": "^0.1.2",
    "style-loader": "0.18.2",
    "url-loader": "0.5.9",
    "wait-on": "2.0.2",
    "webpack": "^3.5.5",
    "webpack-dev-server": "2.6.1",
    "webpack-merge": "^4.1.0",
    "webpack-notifier": "1.5.0",
    "webpack-shell-plugin": "0.5.0"
  },
  "dependencies": {
    "aurelia-bootstrapper": "^2.1.1",
    "aurelia-bootstrapper-webpack": "1.1.0",
    "aurelia-dialog":"1.0.0-rc.1.0.3",
    "aurelia-event-aggregator":"1.0.1",
    "aurelia-fetch-client":"1.1.2",
    "aurelia-framework":"1.1.4",
    "aurelia-history-browser":"1.0.0",
    "aurelia-loader-webpack":"2.1.0",
    "aurelia-logging-console":"1.0.0",
    "aurelia-materialize-bridge":"0.30.0",
    "aurelia-pal-browser":"1.2.1",
    "aurelia-polyfills":"1.2.2",
    "aurelia-route-recognizer":"1.1.0",
    "aurelia-router":"1.3.0",
    "aurelia-templating-binding":"1.3.0",
    "aurelia-templating-resources":"1.4.0",
    "aurelia-templating-router":"1.1.0",
    "aurelia-validation":"1.1.1",
    "bluebird": "^3.5.0",
    "bootstrap": "^3.3.7",
    "get-ip": "^1.2.0",
    "jquery": "3.1.0",
    "material-design-icons":"3.0.1",
    "materialize-css":"0.100.1",
    "materialize-loader":"2.0.1",
    "moment": "2.18.1",
    "numeral": "2.0.6",
    "whatwg-fetch": "2.0.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Answer 1

我建议使用 cli ，创建一个新项目并将 package.json 复制到您的项目中。那么 webpack 配置也应该为您提供指导。