老师,我这里出问题了?
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'
},
// Webpack 输出路径
output: {
// 输出的目录
path: resolve('dist'),
// 输出的文件名
filename: 'js/[name].js'
},
// source-map,调试用的,出错的时候,将直接定位到原始代码,而不是转换后的代码
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'),
pages: resolve('src/pages')
}
},
// 不同类型模块的处理规则
module: {
rules: [
// css
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 模板文件
{
test: /\.art$/,
loader: 'art-template-loader'
},
// 图片
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
// 小于 10K 的图片转成 base64 编码的 dataURL 字符串写到代码中
limit: 10000,
// 其他的图片转移到
name: 'images/[name].[ext]',
esModule: false
}
},
// 字体文件
{
test: /\.(woff2?|eot|ttf|otf)$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[ext]'
}
}
]
},
plugins: [
// 自动将依赖注入 html 模板,并输出最终的 html 文件到目标文件夹
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index/index.art'
})
]
};
正在回答
同学你好,如果确定自己能写出来,那么可以直接走流程,但是不能只为了“快”而不敲代码。之所以让你跟着敲,就是怕你为了求快而忽视了最重要的东西。每个人学习习惯不同,同学可以根据自身情况调整的。
祝学习愉快!
同学你好,解答如下:
1、老师在源码中测试你的配置文件,能正常启动项目,说明该配置文件没有问题。实际开发中,可能无法避免类似这样的配置,所以同学不能急,要一点点来。由于刚接触,所以感觉很烦,接触的多了,就会好些。好在很多配置都比较像,并且配置一次后,可以多次使用,所以不要烦,加油!
2、报错截图中错误含义如下:
不能在basecopy.css中,找到“fonts/PingFangSCRegular.ttf”这个文件:
老师将“src/assets/fonts”下的字体文件删除,就会报该错,而且报错信息与同学一样:
其他同理:
建议同学检查下面三个文件中的路径是否正确:
(将代码都删除,再一点点粘贴回来,这样能排查到哪句有问题)。
3、如果确认自己的路径没问题,建议把node_modules文件夹删除,再重新执行npm install安装一下依赖,然后启动项目试试。或者下载源码,看看源码能不能正常启动,如果源码可以启动,则对比源码,找自己的问题。
祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星