今天刚开始用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
等方法,但折腾了一天都没找到解决办法。
你应该在你的入口文件
test.js
添加import 'babel-polyfill'
。