老师配置看着没问题,打包怎么报错了,哪里的问题呢
//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;
相关截图:
相关截图:
相关截图:
正在回答 回答被采纳积分+1
同学你好, 报错信息显示是缺少依赖,猜测是由于网络问题,依赖没有安装完整导致的,建议同学手动删除node_modules文件夹,重新执行npm install 安装所有的依赖后测试。
如果还有问题,可以切换到cnpm
先安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后,手动删除node_modules文件,再使用cnpm install 试试。
另外,index.js和search.js文件同级,直接通过相对路径引入即可,建议修改:
祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星