老师,我这里出问题了?

老师,我这里出问题了?

const path = require('path');

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


// 获取绝对路径

const resolve = dir => path.resolve(__dirnamedir);


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'

    })

  ]

};


http://img1.sycdn.imooc.com//climg/604eef8609d46e6912080840.jpg

http://img1.sycdn.imooc.com//climg/604eef860934a74b06821218.jpg


正在回答

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

6回答

同学你好,如果确定自己能写出来,那么可以直接走流程,但是不能只为了“快”而不敲代码。之所以让你跟着敲,就是怕你为了求快而忽视了最重要的东西。每个人学习习惯不同,同学可以根据自身情况调整的。

祝学习愉快!

  • 阿山123 提问者 #1

    嗯,没有偷懒,从一开始的,小慕医院,到仿穷游,以及那个那个项目,家居作业都是跟着老师自己写了一份完整的,我是觉得到最后学了vue以后,可以把这些项目在vue里面自己在从新写一遍,并且重构组件化一下。

    2021-03-15 19:02:57
好帮手慕久久 2021-03-15 18:39:54

同学你好,不可以。具体如下:

​“跟着视频一步步”、“跟着视频操作一遍”不只是让同学简单操作一遍流程,还包括跟着老师写一遍代码。对程序员而言,不仅要会搭建出项目,还要会写代码。我们写的代码不严谨,主要的原因就是练得少,所以一定要跟着老师敲代码,敲的多了,就记住怎么写了,慢慢就会自己写了。所以同学不能只搬运老师的代码,只走流程,要敲代码、敲代码、敲代码。实际开发中,也不会给你现成的代码让你搬运,更多的时候是让你自己写,所以一定要跟着敲代码。

祝学习愉快!

  • 提问者 阿山123 #1

    老师,这个我之前在第一阶段的时候已经完成写过了,而且里面的功能都知道怎么实现的,自己也确实跟着老师的视频,自己写了一份自己的,只是现在用老师的代码去操作一遍组件化这个东西。

    2021-03-15 18:43:09
好帮手慕久久 2021-03-15 16:21:34

同学你好,解答如下:

1、本周课程,一定要跟着视频一步步来,不要急,自己搞很容易就乱了,而且理解的也不会太深,反而影响学习进度。

2、后面有vue的课程,包括基础和实战,实战部分会带着大家做项目:

http://img1.sycdn.imooc.com//climg/604f18fd099d181509420536.jpg

不管是什么课程,建议同学不要直接看源码,要跟着视频来。跟着视频操作一遍后,你的思路会更清晰,这样反而会提高你的学习效率。

祝学习愉快!

  • 提问者 阿山123 #1

    我感觉自己的代码写的不够严谨,那我直接拿老师的每部分代码,然后跟着他操作一遍不也可以吗?

    2021-03-15 17:25:23
好帮手慕久久 2021-03-15 14:41:35

同学你好,解答如下:

1、老师在源码中测试你的配置文件,能正常启动项目,说明该配置文件没有问题。实际开发中,可能无法避免类似这样的配置,所以同学不能急,要一点点来。由于刚接触,所以感觉很烦,接触的多了,就会好些。好在很多配置都比较像,并且配置一次后,可以多次使用,所以不要烦,加油!

2、报错截图中错误含义如下:

不能在basecopy.css中,找到“fonts/PingFangSCRegular.ttf”这个文件:

http://img1.sycdn.imooc.com//climg/604efdff0972ee7412380183.jpg

老师将“src/assets/fonts”下的字体文件删除,就会报该错,而且报错信息与同学一样:

http://img1.sycdn.imooc.com//climg/604efff509eb033109650184.jpg

http://img1.sycdn.imooc.com//climg/604f006e09f3c2b315050725.jpg

其他同理:

http://img1.sycdn.imooc.com//climg/604f00c40998635409770205.jpg

建议同学检查下面三个文件中的路径是否正确:

http://img1.sycdn.imooc.com//climg/604f00f209808e9d05850203.jpg

(将代码都删除,再一点点粘贴回来,这样能排查到哪句有问题)。

3、如果确认自己的路径没问题,建议把node_modules文件夹删除,再重新执行npm install安装一下依赖,然后启动项目试试。或者下载源码,看看源码能不能正常启动,如果源码可以启动,则对比源码,找自己的问题。

祝学习愉快!

  • 提问者 阿山123 #1

    后面有没有用Vue开发项目的,就是一开始就用组件写,写一部分测试一部分,这样一次写完之后在整理,真的是各种路径,图片,字体报错?

    2021-03-15 15:50:26
  • 提问者 阿山123 #2

    算了,还是看视频中老师操作一遍把,自己一搞就废。。。。。。

    2021-03-15 16:05:11
阿山123 提问者 2021-03-15 13:43:51

我这还是用老师的,然后还是报错

阿山123 提问者 2021-03-15 13:43:14

好讨厌用这个webpack一点没配置好,就会报错。

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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