admin管理员组文章数量:1794759
webpack报错ERROR in ./src/js/index.js 3:0
这可能是文件路径错误了，找不到目的路径导致的 一般在打包文件或者在生产环境基本配置的时候老是报错不知道什么原因，可能是以下问题（我报错经常的几个原因） 一、关键字没有写对，比如【module写成modules】后者【resolve写成resolver】或者【plugins写成Plugins】等等 二、某个图片或者文件路径写错了，文件名写错了 三、某个文件引入了未调用 四、你写的webpack语法过时了，无法显示 五、没有安装一些基础的插件，这个你可以查看这几个博文 一 二 三 学完gulp会发现webpack简单一点 总之：不要慌，先检查一下自己经常容易写错的那几个单词的拼写，一般都是看视频教学，然后出不来，这不是什么大问题，就是基本的东西写错了
可以参考我下面的写法
我的目录结构
我的webpack.config.js
// css处理引入 const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 输出文件的绝对路径 const { resolve } = require('path') // css兼容性处理 const PostcssPresetEnv = require('postcss-preset-env') // css压缩插件 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // html文件处理 const HtmlWebpackPlugin = require('html-webpack-plugin') // 提取css兼容性处理的代码为公共代码 const commonCssLoader = [ MiniCssExtractPlugin.loader, 'css-loader', //修改loader的默认设置 { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ PostcssPresetEnv() ] } } } ] module.exports = { // 入口文件 entry: './src/js/index.js', // 文件输出 output: { // 名称 filename: 'js/built.js', // 地址 path: resolve(__dirname, 'build') }, module: { rules: [ // css文件处理 { test: /\\.css$/, use: [..monCssLoader] }, // less文件处理 { test: /\\.less$/, use: [..monCssLoader, 'less-loader'] }, // js兼容性处理 { test: /\\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', corejs: { //core-js的版本 version: 3 }, //需要兼容的浏览器 targets: { chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } } ] ] } } }, //处理图片资源 { test: /\\.(png|svg|jpg|jpeg|gif)$/i, loader: 'url-loader', options: { // 图片会大于8kb，会被base64处理 减少请求数量（减轻服务器压力） 图片体积会更大（文件请求数量慢） limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'img', esModule: false }, type: 'javascript/auto' }, // html中img图片的处理 { test: /\\.html$/, loader: 'html-loader' }, // 打包其他资源(排除js/css/html) { exclude: /\\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)/, loader: 'file-loader', options: { outputPath: 'media', //指定这些文件打包后的目录 publicPath: './font', name: '[name][hash:8].[ext]' }, type: 'javascript/auto' } ] }, plugins: [ // html文件 new HtmlWebpackPlugin({ template: './src/pages/index.html', // html压缩 minify: { collapseWhitespace: true, removeComments: true } }), // css文件使用 new MiniCssExtractPlugin({ filename: 'css/built.css' }), // 压缩css new OptimizeCssAssetsPlugin() ], mode: 'production' }js代码
import '../css/index1.css' import '../css/index2.css' const add = (x, y) => { return x + y; } console.log(add(2, 3)); new Promise(function(resolve) { resolve(1) }).then(function(res) { console.log(res, 'promise') })html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>css代码
.box1 { width: 200px; height: 200px; background-color: #ff8500; display: flex; backface-visibility: hidden; } .box2 { width: 200px; height: 200px; background: url(../img/0.png); background-size: 100% 100%; background-repeat: no-repeat; }对照一下，希望可以解决你的问题
版权声明：本文标题：webpack报错ERROR in .srcjsindex.js 3:0 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686990135a126095.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论