Webpack не связывает выходные файлы JS - PullRequest
Новая
       40

Webpack не связывает выходные файлы JS

1 голос
/ 02 апреля 2019

Ни один из выходных файлов js-пакетов не создается и не отображается в каталоге, хотя в выводе терминала говорится, что эти файлы создаются ...

Я пытался следовать нескольким учебникам, чтобы подойти к этой проблеме под разными углами, но я до сих пор не могу понять, что мешает созданию файлов выходного пакета.

Вот версии, которые я использую:

  • npm - 6,9,0

  • Узел - 10.15.0

  • Webpack - 3,5,6

Ниже приведен мой файл webpack.config.js: 

const autoprefixer = require('autoprefixer');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const glob = require('glob');

function tryResolve_(url, sourceFilename) {
  try {
    return require.resolve(url, {paths: [path.dirname(sourceFilename)]});
  } catch (e) {
    return '';
  }
}

function tryResolveScss(url, sourceFilename) {
  const normalizedUrl = url.endsWith('.scss') ? url : `${url}.scss`;
  return tryResolve_(normalizedUrl, sourceFilename) ||
    tryResolve_(path.join(path.dirname(normalizedUrl), `_${path.basename(normalizedUrl)}`),
      sourceFilename);
}

function materialImporter(url, prev) {
  if (url.startsWith('@material')) {
    const resolved = tryResolveScss(url, prev);
    return {file: resolved || url};
  }
  return {file: url};
}


module.exports = [{
  entry: {
    radio: './src/radio.js',
    index: './src/index.js',
    radioStyle: './src/radio.scss',
    indexStyle: './src/index.scss'
    },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          },
          { loader: 'sass-loader',
            options: {
              importer: materialImporter,
              includePaths: glob.sync('node_modules').map((d) => path.join(__dirname, d))
            }
          },
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      }
    ]
  },
}];

Вот мой файл package.json: 

{
  "name": "my-radio",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js",
  "dependencies": {
    "@material/button": "^1.1.0",
    "@material/card": "^1.1.0",
    "@material/ripple": "^1.1.0",
    "@material/top-app-bar": "^1.1.0",
    "@material/typography": "^1.0.0",
    "material-components-web": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "autoprefixer": "^9.5.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "extract-loader": "^3.1.0",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

Как я понимаю, этот код должен выводить "radio.bundle.js", "radioStyle.bundle.js", "index.bundle.js" и "indexStyle.bundle.js" в папку my / dist : 

entry: {
    radio: './src/radio.js',
    index: './src/index.js',
    radioStyle: './src/radio.scss',
    indexStyle: './src/index.scss'
    },
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

Но после запуска npm и получения сообщения «Compiled успешно» я не могу найти эти файлы в моем каталоге.

Это моя структура проекта: 

dist

docs
 proj-dir-structure.odt
node_modules
src
 index.js
 index.scss
 radio.js
 radio.scss
bundle.css
bundle.js
index.html
package.json
package-lock.json
radio.html
webpack.config.js

1 Ответ

0 голосов
/ 02 апреля 2019

Ваш package.json имеет ниже сценарии 

"scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server"
}

npm start вызовет webpack-dev-server. Это создаст все файлы в вашем графике зависимостей и сохранит его in-memory. Это помогает webpack-dev-server обнаруживать изменения в файлах и запускать auto-reload. Встроенные файлы не будут доступны физически

npm run build вызовет webpack -p. Это сгенерирует выходной пакет, который вы бы развернули в производстве. Вы можете найти сгенерированные файлы в вашей папке dist

Вы должны выполнить npm run build для просмотра сгенерированного вывода веб-пакета

...