Question

设计师在这里学习前端。我知道这可能是一个非常简单的问题，但是我正在做一个学习Webpack的教程，每当我在github存储库中运行示例时，它们都将不起作用。当我仔细阅读了本节的内容之后，我设法修复了一些使其无法运行的小语法错误，但是在加载babel loader和东西之后，它无法正常工作，并且抛出了一些非常奇怪的错误，不知道。由于我实际上对Babel并没有太多的经验，我只是将其添加到webpack配置中以学习绳索，但是如果这是Babel错误，那么我很茫然。

以下是指向代码框的链接：https://codesandbox.io/s/jzq81jo2yv

这也是我的package.json的样子：

{
  "name": "webpack-practice",
  "version": "1.0.0",
  "description": "project to practice webpack",
  "main": "index.js",
  "scripts": {
    "prebuild": "del-cli dist -f",
    "build": "webpack",
    "execute": "node /dist/bundle.js",
    "start": "npm run build -s && npm run execute -s"
  },
  "author": "David Aslan French",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "del-cli": "^1.1.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  }
}

这是我的webpack.config.js的样子：

module.exports = {
    entry: './src/main.js',
    output: {
        path: '/dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                options: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015']
                }
            }
        ]
    }
};

我还在Windows上使用WSL，Ubuntu。

这也是我正在关注的教程：https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/

这是github仓库的链接： https://github.com/joezimjs/Webpack-Introduction-Tutorial/tree/example2

这也是给我的错误日志：

> webpack-practice@1.0.0 start /mnt/c/Users/Owner/Work/Web/Webpack-Practice
> npm run build -s && npm run execute -s

[BABEL] Note: The code generator has deoptimised the styling of "/mnt/c/Users/Owner/Work/Web/Webpack-Practice/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
Hash: 1111e3ba66d401ede87c
Version: webpack 4.12.0
Time: 3983ms
Built at: 06/19/2018 12:50:31 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  89.4 KiB       0  [emitted]  main
 [31] (webpack)/buildin/amd-options.js 82 bytes {0} [built]
 [47] (webpack)/buildin/module.js 521 bytes {0} [built]
 [99] (webpack)/buildin/global.js 770 bytes {0} [built]
[101] ./src/main.js 133 bytes {0} [built]
    + 98 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
/dist/bundle.js:1
(function (exports, require, module, __filename, __dirname) { !function(t){var n={};function r(e){if(n[e])return n[e].exports;var u=n[e]={i:e,l:!1,exports:{}};return t[e].call(u.exports,u,u.exports,r),u.l=!0,u.exports}r.m=t,r.c=n,r.d=function(t,n,e){r.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:e})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,n){if(1&n&&(t=r(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(r.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var u in t)r.d(e,u,function(n){return t[n]}.bind(null,u));return e},r.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(n,"a",n),n},r.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},r.p="",r(r.s=101)}([function(t,n,r){"use strict"

TypeError: e is not a function
    at Object.<anonymous> (/dist/bundle.js:1:19168)
    at r (/dist/bundle.js:1:172)
    at Object.<anonymous> (/dist/bundle.js:1:19248)
    at r (/dist/bundle.js:1:172)
    at Object.<anonymous> (/dist/bundle.js:1:19379)
    at r (/dist/bundle.js:1:172)
    at Object.<anonymous> (/dist/bundle.js:1:1816)
    at r (/dist/bundle.js:1:172)
    at Object.<anonymous> (/dist/bundle.js:1:3186)
    at r (/dist/bundle.js:1:172)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-practice@1.0.0 start: `npm run build -s && npm run execute -s`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start 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!     /home/david/.npm/_logs/2018-06-19T18_50_32_168Z-debug.log

Answer 1

好吧，我是个白痴。我再次查看了他的仓库，发现他在webpack.config.js文件中包含了有关排除节点模块的声明。这是webpack文件的正确版本：

module.exports = {
    entry: './src/main.js',
    output: {
        path: '/dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                loader: 'babel-loader',
                // blacklist node_modules scripts from being processed via Babel
                exclude: /node_modules/,
                options: {
                    // prevents multiple versions of e.g. regeneratorRuntime from
                    // being created when using generators in multiple files
                    plugins: ['transform-runtime'],
                    // tell Babel which presets to use
                    presets: ['es2015']
                }
            }
        ]
    }
};

Webpack教程的配置文件无法正确运行Babel loader

1 个答案: