Webpack初学遇到的问题

taoszu 发布于2019-08-22 18:49 / 1352人阅读

摘要：的功能包转译过程中使用到的插件，其中是步骤使用的。阶段使用到的一系列标准新增的原生对象和的，实现上仅仅是和两个包的封装。功能类似一般用于或者中，因为它不会污染全局变量

引入图片资源时遇到的问题

Module parse failed: Unexpected character "�" (1:0)
You may need an appropriate loader to handle this file type.

可能原因：

未安装处理图片的loader 解决方法：首先安装loader：npm install file-loader url-loader --save-dev，然后在 webpack.config.js 文件中的 module 添加 rules 配置

正则表达式错误，无法匹配到正确的rules，正确的正则表达式 /.(jpg|png|svg)??.*$/

引入vue-loader遇到的问题

rules: {
  test: /.vue$/,
  use: [{
    loader: "vue-loader", //将vue格式编写的组件转换为JavaScript模块
  }],
  exclude: /node_module/
}

这样会报错：

ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin.Make sure to include VueLoaderPlugin in your webpack config.

原因：
Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,

安装babel-loader的时候，如果babel-loader@8需要安装babel-core@7.x，如果你想要使用Babel6.x的话，需要babel-loader@7
在webpack.config.js中只需要配置babel-loader即可，不需要babel-core，但是需要安装babel-core
babel-core是babel转译器的核心，提供了babel转译的API，webpack中的bable-loader就是调用这些API来完成转译过程的。

Babel的功能包

babel-plugin-xxx: babel转译过程中使用到的插件，其中babel-plugin-transform-xxx是transform步骤使用的。
babel-preset-xxx: transform阶段使用到的一系列plugin
babel-polyfill: JS标准新增的原生对象和API的shim，实现上仅仅是core-js和regenerator-runtime两个包的封装。
babel-runtime: 功能类似babel-polyfill,一般用于library或者plugin中，因为它不会污染全局变量

云服务器 GPU云服务器布局遇到的问题学习遗传算法遇到的问题看apue遇到的有关问题 js请求数据遇到的问题吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96251.html

react+webpack+跨域代理+多页面初学心得分享

摘要：初学，利用进行工程化开发管理，遇到一些问题，如多页面处理，跨域代理的设置，如何同时引入使用。这个命令生成的文件可以放到后端服务器指定的静态文件目录下，这些就是用来上线的文件。这两个文件夹下的代码文件就是为两个独立的页面准备的。初学react，利用webpack进行工程化开发管理，遇到一些问题，如多页面处理，跨域代理的设置，如何同时引入使用jQuery。第一次试水，简单写了一个表格组件...

Chao 2019-08-26 17:15 评论0 收藏0
从零开始编写React-Express单页博客应用(学习总结)

摘要：单页博客应用编写总结很久之前就想写一个博客应用在一开始想要直接用和模板直接写但是暑假一开始的时候不小心入了的坑所以就一不做二不休直接用写那既然用了不写个单页应用也过意不去了不前前后后写了将近两个星期现在看来这其实是一个很容易的应用但是鉴于 React-Express单页博客应用编写总结很久之前就想写一个博客应用.在一开始想要直接用express和ejs模板直接写, 但是暑假一开始的时...

Jioby 2019-08-21 10:56 评论0 收藏0
关于vue开发的常见问题

摘要：看看这里说的顺便你可以加深对和的理解计算属性默认只有，不过在需要时你也可以提供一个然后，解决完毕嘻嘻嘻二打包工程上线后，你发现开发者工具的看到了源码对，上线配置错了。一、vue单页面回退丢失参数的问题可能有些跟我一样的新手同学会遇到一个问题，就是比如我从商品详情跳转到购物车，没问题，但是，购物车页面中点击浏览器的回退按钮，返回到detail页面时，你的动态数据（图片啊，名称啊，价...

陆斌 2019-08-22 18:18 评论0 收藏0
关于vue开发的常见问题

摘要：看看这里说的顺便你可以加深对和的理解计算属性默认只有，不过在需要时你也可以提供一个然后，解决完毕嘻嘻嘻二打包工程上线后，你发现开发者工具的看到了源码对，上线配置错了。一、vue单页面回退丢失参数的问题可能有些跟我一样的新手同学会遇到一个问题，就是比如我从商品详情跳转到购物车，没问题，但是，购物车页面中点击浏览器的回退按钮，返回到detail页面时，你的动态数据（图片啊，名称啊，价...

lushan 2019-08-02 10:47 评论0 收藏0
webpack入门学习手记（二）

摘要：例如现在的入门学习手记系列。收到粉丝留言和打赏的喜悦。安装上一篇入门学习手记一，主要是介绍了的核心概念，是整个学习过程的基础知识。新生成的类似如下入门学习手记因为生成的内容过多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号：前端修炼之路，欢迎关注。最近开始想要维护一个个人的公众...

Joyven 2019-08-23 14:05 评论0 收藏0