引入图片资本时碰到的题目
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中,由于它不会污染全局变量