老师我这边感觉全乱套了 各种问题
webpack.js文件
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
//const { turn } = require('core-js/core/array');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
const resolve=div=>path.resolve(__dirname,dir);
module.exports={
mode:'development',
//webpack入口文件
entry:{
index:'./src/pages/index/index.js',//多个js文件导入 键就是默认文件名
ajax:'./src/ajax.js'
},
output:{
//输出的目录
path:path.resolve(__dirname,'dist'),
//输出的文件名
filename:'js/[name].js'
},
devtool:'cheap-module-eval-source-map',
resolve:{
//自动补全(可以省略)的扩展名
extensions:['.js'],
//路径别名
alias:{
api:resolve('src/api'),
fonts:resolve('src/assets/fonts'),
images:resolve('src/assets/images'),
styles:resolve('src/assets/styles'),
components:resolve('src/components'),
}
},
//不同类型模块的处理规则
module:{
rules:[
//css
{
test:/\.css$/,//什么文件就输入什么 js，css
exclude: /node_modules/,
//loader:"babel-loader",
//use:['style-loader','css-loader'],
//loader:"css-loader",
use:[{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},'css-loader']
//use:[MiniCssExtractPlugin.loader,'css-loader'],可以把css文件单独提取出来放入html文件里
},
//模版文件
{
test:/\.art$/,
loader:'art-template-loader'
},
//图片
{
test:/\.(jpe?g|png|gif|svg)$/,
loader:'url-loader',
options:{
//小于10k的图片转成base64编码的dataURl字符串写到代码中
limit:10000,
//其他图片转移到
name:'images/[name].[ext]',
esModule:false,
},
//use:'file-loader'
},
//字体文件
{
test:/\.(woff2?|eot|ttf|otf)$/,
loader:'url-loader',
options:{
limit:10000,
name:'fonts/[name].[ext]'
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/pafes/index/index.art',
filename:'index.html',//默认文件名 必须要加 不然多个导入后面会覆盖前面的
//chunks:['index'],//告诉插件每个指定的html文件要引入的js文件
// minify:{
// removeComments:false,//删除index.html中的注释
// collapseWhitespace:false,//删除index.html中的空格
// removeAttributeQuotes:false,//删除index.html文件里的html标签属性值的双引号
// }
}),
// new HtmlWebpackPlugin({
// template:'./inde.html',
// filename:'inde.html',
// chunks:['ajax'],
// }),
// new MiniCssExtractPlugin({
// filename:'css/[name].css',
//})
]
}
输入npm start命令后显示
> webpack@1.0.0 start
> webpack-dev-server --open chrome
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'html-webpack-plugin'
Require stack:
- /Users/chenchenshaobing/Desktop/项目/webpack.config.js
- /Users/chenchenshaobing/Desktop/项目/src/node_modules/webpack-cli/bin/utils/convert-argv.js
- /Users/chenchenshaobing/Desktop/项目/src/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/chenchenshaobing/Desktop/项目/webpack.config.js:2:25)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/chenchenshaobing/Desktop/项目/webpack.config.js',
'/Users/chenchenshaobing/Desktop/项目/src/node_modules/webpack-cli/bin/utils/convert-argv.js',
'/Users/chenchenshaobing/Desktop/项目/src/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
}
并且vscode里面的art文件都不显示html的图标了 连到浏览器打开都打不开了
正在回答 回答被采纳积分+1
同学你好，将下面的插入粘贴到package.json文件中
{
"name": "mall",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open chrome"
},
"author": "",
"license": "ISC",
"devDependencies": {
"art-template-loader": "^1.4.3",
"css-loader": "^4.2.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"art-template": "^4.13.2"
}
}然后npm install全部安装试试。
同学你好，报错信息是没有找到html-webpack-plugin插件
建议检查package.json文件中是否有此插件，没有的话安装一下。
另外配置调整如下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//const { turn } = require('core-js/core/array');
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const resolve = div => path.resolve(__dirname, dir);
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
mode: 'development',
//webpack入口文件
entry: {
index: './src/pages/index/index.js', //多个js文件导入 键就是默认文件名
// ajax: './src/ajax.js'
},
output: {
//输出的目录
path: path.resolve(__dirname, 'dist'),
//输出的文件名
filename: 'js/[name].js'
},
devtool: 'cheap-module-eval-source-map',
resolve: {
//自动补全(可以省略)的扩展名
extensions: ['.js'],
//路径别名
alias: {
api: resolve('src/api'),
fonts: resolve('src/assets/fonts'),
images: resolve('src/assets/images'),
styles: resolve('src/assets/styles'),
components: resolve('src/components'),
}
},
//不同类型模块的处理规则
module: {
rules: [
//css
{
test: /\.css$/, //什么文件就输入什么 js，css
exclude: /node_modules/,
//loader:"babel-loader",
use:['style-loader','css-loader'],
//loader:"css-loader",
// use: [{
// loader: MiniCssExtractPlugin.loader,
// options: {
// publicPath: '../'
// }
// }, 'css-loader']
//use:[MiniCssExtractPlugin.loader,'css-loader'],可以把css文件单独提取出来放入html文件里
},
//模版文件
{
test: /\.art$/,
loader: 'art-template-loader'
},
//图片
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader',
options: {
//小于10k的图片转成base64编码的dataURl字符串写到代码中
limit: 10000,
//其他图片转移到
name: 'images/[name].[ext]',
esModule: false,
},
//use:'file-loader'
},
//字体文件
{
test: /\.(woff2?|eot|ttf|otf)$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
// template: './src/pafes/index/index.art',
template: './src/pages/index/index.art',
filename: 'index.html', //默认文件名 必须要加 不然多个导入后面会覆盖前面的
//chunks:['index'],//告诉插件每个指定的html文件要引入的js文件
// minify:{
// removeComments:false,//删除index.html中的注释
// collapseWhitespace:false,//删除index.html中的空格
// removeAttributeQuotes:false,//删除index.html文件里的html标签属性值的双引号
// }
}),
// new HtmlWebpackPlugin({
// template:'./inde.html',
// filename:'inde.html',
// chunks:['ajax'],
// }),
// new MiniCssExtractPlugin({
// filename:'css/[name].css',
//})
]
}（1）html-webpack-plugin插件引入注释掉
css配置改为
（2）dir参数书写有误
（3）pages文件夹书写有误
祝学习愉快~
-
慕尼黑0510008 #2
老师 我这个文件位置是不是放错的原因 我打开的终端是src的 我webpack.json文件有没有放错什么的 我按照今天老师跟我说的步骤 我又操作了一遍 还是报同样的错误
但是我给webpack.json文件移到src目录里 webpack.json文件就报错了 就是不知道是文件放错了 还是代码写错了 很迷
2022-02-20 11:53:30 -
慕尼黑0510008 #3
我的webpack.json文件是：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
mode: 'development',
//webpack入口文件
entry: {
index: './src/pages/index/index.js', //多个js文件导入 键就是默认文件名
// ajax: './src/ajax.js'
},
output: {
//输出的目录
path: path.resolve(__dirname, 'dist'),
//输出的文件名
filename: 'js/[name].js'
},
devtool: 'cheap-module-eval-source-map',
resolve: {
//自动补全(可以省略)的扩展名
extensions: ['.js'],
//路径别名
alias: {
api: resolve('src/api'),
fonts: resolve('src/assets/fonts'),
images: resolve('src/assets/images'),
styles: resolve('src/assets/styles'),
components: resolve('src/components'),
}
},
//不同类型模块的处理规则
module: {
rules: [
//css
{
test: /\.css$/, //什么文件就输入什么 js，css
exclude: /node_modules/,
//loader:"babel-loader",
use:['style-loader','css-loader'],
},
//模版文件
{
test: /\.art$/,
loader: 'art-template-loader'
},
//图片
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[ext]',
esModule: false,
},
},
{
test: /\.(woff2?|eot|ttf|otf)$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/pages/index/index.art',
filename: 'index.html',
}),
]
}
2022-02-20 11:55:38
index.js文件
//css
import './css/css1.css';
import './css/jichu.css';
//js
import './js/menu';
import './js/carousel';
import './js/bacltotop';
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星