老师配置看着没问题,打包怎么报错了,哪里的问题呢

老师配置看着没问题,打包怎么报错了,哪里的问题呢

//package.json

{

"name": "webpack2",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"start": "webpack --config webpack.config.js"

},

"author": "",

"license": "ISC",

"devDependencies": {

"html-webpack-plugin": "^4.3.0",

"webpack": "^4.44.1",

"webpack-cli": "^3.3.12"

}

}

webpack.config.js

const path = require('path');

//该插件将为你生成一个HTML5文件,其中包括使用script标签的(将生成的js自动嵌入html)

// body中的所有webpack包

const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {

//模式,开发模式,打包完成后的代码不会压缩,如果不设置,打包后的代码会压缩混淆

mode: 'development',

//指定入口文件,单页面,就一个入口文件,多页面开发就会有多个入口文件

//entry: './src/index.js',

//多入口文件

entry: {

main: './src/index.js',

search:'./src/search.js'

},


//打包后代码输出的路径和文件名字

//单入口对应的输出

//   output: {

//     path: path.resolve(__dirname, 'dist'),//是绝对路径

//     filename: 'bundle.js'

//     },

//多入口对应的输出

output: {

path: path.resolve(__dirname, 'dist'),//是绝对路径

filename: '[name].js'//name取对应入口文件名字

},

//这里进行插件配置

plugins: [

new HtmlWebpackPlugin(

{

template:'./index.html',

filename: 'index.html',

chunks:['index']

}

),

new HtmlWebpackPlugin(

{

template:'./search.html',

filename: 'search.html',

chunks:['search']

}

)

]


};

index.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>webpach使用</title>

</head>

<body>

<p>我是首页</p>

</body>

</html>

index.js


import age from './src/search.js';

console.log('index.js', age);

search.js

const age = 18;

console.log('search');

export default age;

相关截图:

https://img1.sycdn.imooc.com//climg/62692b0509c331a302510296.jpg


相关截图:

https://img1.sycdn.imooc.com//climg/62692b6f0958876506380381.jpg

相关截图:

https://img1.sycdn.imooc.com//climg/62692b8b09a0123d05750388.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2022-04-28 09:56:22

同学你好, 报错信息显示是缺少依赖,猜测是由于网络问题,依赖没有安装完整导致的,建议同学手动删除node_modules文件夹,重新执行npm install 安装所有的依赖后测试。

如果还有问题,可以切换到cnpm

先安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后,手动删除node_modules文件,再使用cnpm install 试试。

另外,index.js和search.js文件同级,直接通过相对路径引入即可,建议修改:

https://img1.sycdn.imooc.com//climg/6269f42a0987680705620105.jpg

祝学习愉快~


  • 提问者 FalseMask #1

    https://img1.sycdn.imooc.com//climg/626a036609a31f9107230297.jpg

    老师cnpm 安装报错


    2022-04-28 11:01:34
  • 好帮手慕慕子 回复 提问者 FalseMask #2

    报错意思是缺少权限,如下:

    https://img1.sycdn.imooc.com//climg/626a054f099459d206910281.jpg

    添加sudo后试试,如下:

    sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

    祝学习愉快~

    2022-04-28 11:09:06
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师