WebPack配置失败

时间:2018-07-23 14:09:58

标签: javascript node.js webpack

我在webpack上的配置文件遇到了一些问题。

现在我具有以下结构:the stucture

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'时,它会工作并显示以下结果: outcome

我将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中的“脚本”

deleting

现在我有了这个结构: newStructure

而且,当我运行npm run build时,我期望在/dist/main.js中有一个小的.js文件,但是我收到了错误堆栈enter image description here

当我仍然从package.json错误中删除“脚本”时,... new Errors

很抱歉,如果还有一些不好的英语或文字,只是脑袋完全沸腾了...

1 个答案:

答案 0 :(得分:-1)

你忘记添加'.env'文件,如果你刚刚克隆了项目,你的gitignore规则不允许跟踪'.env'文件。