webpack+babel打包提示模块未找到Module not found

新手上路,请多包涵
今天刚开始用webpack就碰到麻烦了,试了很多种办法都不行,怀疑方向找错了……我都要哭了,恳请前辈指点,感激不尽!~
---

1.webpack导出babel-polyfill代码的时候,提示Module not found: Error: Can't resolve xxxxx,如下:
错误截图

2.demo的文件目录:

-- dist
-- node_modules
-- .babelrc
-- package.json
-- test.js
-- webpack.config.js

3.package.json

{
  "presets": [
    "env"
  ],
  "plugins": [
    ["transform-runtime"]
  ]
}

4.package.json

{
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "webpack": "^3.8.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "jquery": "^3.2.1"
  }
}

5.webpack.config.js

const path = require('path');

module.exports = {
    entry: ["babel-polyfill", "jquery", "./test.js"],//报错,模块未找到
    // entry: ["jquery", "./test.js"],//正常打包
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'test_output.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        plugins: ['transform-runtime'],
                    },
                },
                exclude: /node_modules/,
                include: [
                    path.resolve(__dirname, 'node_modules'),
                ],
            },
        ],
    },
    resolve: {
        extensions: ['js'],
        modules: [
            'node_modules',
            path.resolve(__dirname, 'node_modules'),
        ],
    },
    context: __dirname,
};

6.test.js

'use strict';

$(() => {

    Object.assign(window, {
        webpackTest() {
            console.count('test');
        }
    });

    window.webpackTest();
    
});

7.问题定位在路径(和/)上,也尝试了重新cnpm i,设置resolve.modules等方法,但折腾了一天都没找到解决办法。

阅读 10.4k
2 个回答

你应该在你的入口文件 test.js 添加 import 'babel-polyfill'

我和楼主的demo目录差不多,我的编译没报错。不理解你为啥要在入口放上babel-polyfill

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏