Настройка Webpack

161
28 мая 2022, 18:50
WARNING in ./src/scss/main.scss 9:17-24
export 'default' (imported as 'content') was not found in '!!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../../node_modules/postcss-loader/src/index.js??ruleSet[1].rules[1].use[3]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./main.scss' (possible exports: )
 @ ./src/index.js 3:0-26
WARNING in ./src/scss/main.scss 13:15-29
export 'default' (imported as 'content') was not found in '!!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../../node_modules/postcss-loader/src/index.js??ruleSet[1].rules[1].use[3]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./main.scss' (possible exports: )
 @ ./src/index.js 3:0-26
WARNING in ./src/css/main.css 9:17-24
export 'default' (imported as 'content') was not found in '!!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!../../node_modules/postcss-loader/src/index.js??ruleSet[1].rules[2].use[3]!./main.css'
(possible exports: )
 @ ./src/index.js 2:0-24
WARNING in ./src/css/main.css 13:15-29
export 'default' (imported as 'content') was not found in '!!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!../../node_modules/postcss-loader/src/index.js??ruleSet[1].rules[2].use[3]!./main.css'
(possible exports: )
 @ ./src/index.js 2:0-24

У меня возникло 2 ошибки в консоли.

ERROR in ./src/scss/main.scss (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./src/scss/main.scss) Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: No PostCSS Config found in: E:\exam\webpacks\src\js\postcss.config.js at E:\exam\webpacks\node_modules\postcss-load-config\src\index.js:91:15 at processResult (E:\exam\webpacks\node_modules\webpack\lib\NormalModule.js:582:19) at E:\exam\webpacks\node_modules\webpack\lib\NormalModule.js:675:5 at E:\exam\webpacks\node_modules\loader-runner\lib\LoaderRunner.js:397:11 at E:\exam\webpacks\node_modules\loader-runner\lib\LoaderRunner.js:252:18 at context.callback (E:\exam\webpacks\node_modules\loader-runner\lib\LoaderRunner.js:124:13) at E:\exam\webpacks\node_modules\postcss-loader\src\index.js:208:9 @ ./src/scss/main.scss 2:12-322 9:17-24 13:15-29 @ ./src/index.js 3:0-26
ERROR in ./src/css/main.css (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[2].use[3]!./src/css/main.css) Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: No PostCSS Config found in: E:\exam\webpacks\src\js\postcss.config.js at E:\exam\webpacks\node_modules\postcss-load-config\src\index.js:91:15 at processResult (E:\exam\webpacks\node_modules\webpack\lib\NormalModule.js:582:19) at E:\exam\webpacks\node_modules\webpack\lib\NormalModule.js:675:5 at E:\exam\webpacks\node_modules\loader-runner\lib\LoaderRunner.js:397:11 at E:\exam\webpacks\node_modules\loader-runner\lib\LoaderRunner.js:252:18 at context.callback (E:\exam\webpacks\node_modules\loader-runner\lib\LoaderRunner.js:124:13) at E:\exam\webpacks\node_modules\postcss-loader\src\index.js:208:9 @ ./src/css/main.css 2:12-250 9:17-24 13:15-29 @ ./src/index.js 2:0-24
2 ERRORS in child compilations webpack 5.4.0 compiled with 4 errors in 4125 ms npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! webpacks@1.0.0 build: webpack --mode production npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the webpacks@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Chupa\AppData\Roaming\npm-cache_logs\2020-11-18T10_43_52_268Z-debug.log Процесс терминала "C:\Windows\system32\cmd.exe /d /c npm run build" был завершен с кодом выхода 1.

Прикрепляю package.json и webpack.config.js

"devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "autoprefixer": "^10.0.2",
    "babel-loader": "^8.2.0",
    "css-loader": "^5.0.1",
    "css-mqpacker": "^7.0.0",
    "cssnano": "^4.1.10",
    "mini-css-extract-plugin": "^1.3.0",
    "node-sass": "^5.0.0",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
module.exports = {
  entry: {
    app: "/src/index.js",
  },
  output: {
    filename: "[name].js", //output all files
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist",
  },
  module: {
    rules: [
      //rules for files
      {
        test: /\.js$/, //rules for all js files
        loader: "babel-loader",
        exclude: "/node_modules/",
      },
      {
        // scss
        test: /\.scss$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: { sourceMap: true },
          },
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true,
              config: { path: "src/js/postcss.config.js" },
            },
          },
          {
            loader: "sass-loader",
            options: { sourceMap: true },
          },
        ],
      },
      {
        // css
        test: /\.css$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: { sourceMap: true },
          },
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true,
              config: { path: "src/js/postcss.config.js" },
            },
          },
        ],
      },
    ],
  },
  devServer: {
    overlay: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
    }),
  ],
};
Answer 1

У меня сработало, если убрать style-loader из webpack.config.js

Answer 2

Мне помогла решить эту проблему установка старых версий пакетов. Там какие-то несовместимости между ними. mini-css-extract-plugin походу не работает с webpack 5. Пруф. Поэтому сначала я даунгрейдил webpack до 4 версии. А потом и все остальные плагины как-то связанные с sass и css. Вот эти версии с которыми все взлетело.

 "devDependencies": {
     ...
    "autoprefixer": "^9.8.6",
    "css-loader": "^4.2.2",
    "html-webpack-plugin": "^4.4.1",
    "mini-css-extract-plugin": "^0.11.0",
    "postcss": "^7.0.32",
    "postcss-loader": "^3.0.0",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },

Все это можно сделать одной строкой в командной строке:

npm r css-loader postcss postcss-loader sass-loader style-loader \
    webpack-cli webpack-dev-server html-webpack-plugin autoprefixer \
    && npm i -D css-loader@4 postcss@7 postcss-loader@3 sass-loader@10 \
    style-loader@1 webpack-cli@3 webpack-dev-server@3 \
    html-webpack-plugin@4 autoprefixer@9
READ ALSO
Сессия в Node.js быстро сбрасывается

Сессия в Node.js быстро сбрасывается

Сессия устанавливается после авторизацииЕсли попереключаться по ссылкам внутри сайта, все работает нормально

175
Диапазон дат в jquery datepicker

Диапазон дат в jquery datepicker

Использую в проекте jquery datepicker с параметрами

190
Помогите написать асинхронную функцию

Помогите написать асинхронную функцию

Нужно написать функцию, которая получает массив всех пользователей и передает его в функцию коллбэк

123
прерывается выполнения скрипта, без ошибки

прерывается выполнения скрипта, без ошибки

Есть несколько асинхронных функций которые вызываются вот так:

256