Блог

Главная - Вопросы по программированию - Запутанный синтаксис webpack. Пытаюсь исправить файл webpack.config из старого руководства 2017 года

Запутанный синтаксис webpack. Пытаюсь исправить файл webpack.config из старого руководства 2017 года

#javascript #webpack #babeljs

#javascript #webpack #babeljs

Вопрос:

Я довольно новичок, когда дело доходит до современных парадигм веб-разработки.

Недавно я прочитал эту статью, чтобы войти в курс дела. https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

и в настоящее время я пытаюсь реализовать руководство в этой статье https://codeburst.io/how-to-use-webpack-in-asp-net-core-projects-a-basic-react-template-sample-25a3681a5fc2

Оба относятся к 2017 году, и с тех пор в webpack, по-видимому, произошли большие синтаксические изменения. Мне было интересно, может ли кто-нибудь помочь объяснить, почему я получаю эту ошибку

 PS C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReact> npm run build:dev

> ASPNetCoreReact@1.0.0 build:dev C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReact
> webpack --mode=development

C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactwebpack.config.js:23
   { test: /.css$/, use: extractCSS.extract(['css-loader?
                                              ^^^^^^^^^^^^

SyntaxError: Invalid or unexpected token
    at new Script (vm.js:80:7)
    at NativeCompileCache._moduleCompile (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_modulesv8-compile-cachev8-compile-cache.js:226:18)
    at Module._compile (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_modulesv8-compile-cachev8-compile-cache.js:172:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_modulesv8-compile-cachev8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_moduleswebpack-clibinutilsconvert-argv.js:115:13)
    at requireConfig (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_moduleswebpack-clibinutilsconvert-argv.js:117:6)
    at C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_moduleswebpack-clibinutilsconvert-argv.js:124:17
    at Array.forEach (<anonymous>)
    at module.exports (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_moduleswebpack-clibinutilsconvert-argv.js:122:15)
    at yargs.parse (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_moduleswebpack-clibincli.js:71:45)
    at Object.parse (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_modulesyargsyargs.js:567:18)
    at C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_moduleswebpack-clibincli.js:49:8
    at Object.<anonymous> (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_moduleswebpack-clibincli.js:368:3)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:UserssgibsonsourcereposASPNetCoreReactASPNetCoreReactnode_moduleswebpackbinwebpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ASPNetCoreReact@1.0.0 build:dev: `webpack --mode=development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ASPNetCoreReact@1.0.0 build:dev script.

При использовании этого webpack.config.

 module.exports = {
  entry: "./wwwroot/source/app.js",
  output: {
    path: path.resolve(__dirname, "wwwroot/dist"),
    filename: "bundle.js"
  },
  plugins: [
    extractCSS,
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Popper: ["popper.js", "default"]
    }),
    new webpack.optimize.UglifyJsPlugin()
  ],
  module: {
    rules: [
      { test: /.css$/, use: extractCSS.extract(["css-loader?minimize"]) },
      {
        test: /.js?$/,
        use: {
          loader: "babel-loader",
          options: { presets: ["@babel/preset-env"] }
        }
      }
    ]
  }
};

Синтаксис Webpack меня очень смущает. Я действительно не слежу за ходом, который здесь происходит.

Комментарии:

1. Когда я редактировал ваш пост, я увидел в своей IDE, что linter выдает ошибку в синтаксисе, потому что у вас был новый разрыв строки между css-loader? и minimize . Вероятно, это неожиданный токен, который Webpack не смог разрешить

2. интересно. Я не учел этого и просто предположил, что синтаксис устарел. Я обязательно поищу подобные вещи в будущем

Ответ №1:

Я нашел ответ на свой вопрос. Приношу свои извинения за то, что не дал себе еще немного времени погрузиться поглубже. Я просто чувствовала себя по-настоящему потерянной. Мне нужно было прочитать о каждом отдельном компоненте в файле webpack, чтобы выяснить, как они должны взаимодействовать / объявляться в 2019 году по сравнению с версиями, которые они были в 2017 году.

Это привело к устранению всех ошибок

 const path = require('path');
const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('allstyles.css');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
   optimization: {
      minimizer: [new UglifyJsPlugin()],
   },
  entry: './wwwroot/source/app.js',
  output: {
            path: path.resolve(__dirname, 'wwwroot/dist'),
            filename: 'bundle.js'
          },
  plugins: [
   extractCSS,
    new webpack.ProvidePlugin({
               $: 'jquery',
          jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
                     }),
          ],
   module: {
      rules: [
         {
            test: /.css$/,
            use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: "css-loader"
            })
          },
         {
            test: /.js?$/,
            use: {
               loader: 'babel-loader', options: {
                  presets:
                     ['@babel/preset-env']
               }
            }
         },
      ]
   }

};