Webpack 不捆绑输出 JS 文件 [英] Webpack Not Bundling Output JS Files

问题描述

没有任何输出 js 包文件被创建，也没有显示在目录中，尽管终端的输出说这些文件正在构建......

None of the output js bundle files are being created nor show up in the directory, although the output from the terminal says these files are being built...

为了从不同角度解决这个问题，我尝试了几个教程，但我仍然无法弄清楚是什么阻止了我的输出包文件被创建.

I have tried following several tutorials in order approach this problem from different angles, but I still cannot figure out what is preventing my output bundle files from being created.

这些是我正在运行的版本:

These are the versions I'm running:

• npm - 6.9.0

• npm - 6.9.0

节点 - 10.15.0

Node - 10.15.0

Webpack - 3.5.6

Webpack - 3.5.6

以下是我的 webpack.config.js 文件:

The following is my webpack.config.js file:

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 文件:

The following is my package.json file:

{
  "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"输出到我的/dist文件夹中:

As I understand, this code is supposed to output "radio.bundle.js", "radioStyle.bundle.js", "index.bundle.js", and "indexStyle.bundle.js" into my /dist folder:

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 start 并收到编译成功"消息后，我在目录中的任何地方都找不到这些文件.

But after I npm start and get a "Compiled successfully" message, I can't find these files anywhere in my directory.

这是我的项目结构:

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

推荐答案

你的 package.json 有以下脚本

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

npm start 将调用 webpack-dev-server.这将构建依赖图中的所有文件并将其保存在内存中.这有助于 webpack-dev-server 检测文件的变化并触发 auto-reload.构建的文件在物理上不可用

npm start will invoke webpack-dev-server. This will build all the files in your dependency graph and keep it in-memory. This helps the webpack-dev-server to detect change in files and trigger auto-reload. The built files will not be available physically

npm run build 将调用 webpack -p.这将生成您将在生产中部署的输出包.您可以在 dist 文件夹

npm run build will invoke webpack -p. This will generate the output bundle which you would deploy in production. You can find the generated files in your dist folder

必须执行 npm run build 才能查看生成的 webpack 输出

You have to execute npm run build to view the generated webpack output

这篇关于Webpack 不捆绑输出 JS 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！