时间戳

首页 > 解决方案 > WebPack 配置失败

javascript - WebPack 配置失败

问题描述

我在 webpack 上的配置文件有一些问题。

现在我有这个结构：结构

package.json 看起来像这样：

{
  "name": "webpack-4-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
    "build": "webpack --mode production ./src/index.js --output ./dist/main.js"
  },
  "author": "Andrii Hordynsky",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^3.1.0"
  }
}

Index.js 只是：console.log("hello, booooiiii");

当我运行“npm run build”时，它可以工作并显示以下结果： 结果

我正在添加 babel："npm install babel-core babel-loader babel-preset-env --save-dev它也可以：babel

添加 .babelrc 文件：

{
"presets": [
   "env"
   ]
}

并开始使用这个结构创建 webpack.config.js：

// Webpack v4
const path = require('path');
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

并删除

"dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
    "build": "webpack --mode production ./src/index.js --output ./dist/main.js"

来自 package.json 的“脚本”

删除

现在我有了这个结构： newStructure

而且，当我运行时，npm run build我期待一些小的 .js 文件/dist/main.js，但我收到了错误堆栈，请在此处输入图像描述

当我从错误中删除“脚本”时package.json仍然在这里...... 新错误

对不起，如果有一些不好的英语或文字，只是，头脑完全沸腾了......

标签： javascriptnode.jswebpack

解决方案

您忘记添加“.env”文件，如果您刚刚克隆了项目，您的 gitignore 规则不允许跟踪“.env”文件。

推荐阅读