Invalid configuration object. Webpack has been initialised using a configuration
object that does not match the API schema.
- configuration.output.path: The provided value "dist/js/page" is not an absolu
te path!
-> The output directory as **absolute path** (required).
以上提示的意思是：输出路径必须是绝对路径
这是原配置文件中的代码：
var webpack = require("webpack");
module.exports = {
"entry": {
index : './js/demo01.js'
},
//入口文件输出配置
"output": {
path: 'dist/js/page',//此处应该修改为 path: __dirname+'/dist/js/page'
filename: '[name].js'
},
"module": {
rules: [
{
test: /\.scss$/,
loader:'style-loader!css-loader!sass-loader'
}
]
}
}
首先我们需要安装一个
webpack
插件html-
webpack
-plugin,该插件的作用是帮助我们生成创建html入口文件。执行如下命令
npm install html-
webpack
-plugin --save-dev
在项目app目录下建立component.
js
文件,写入如下代码
export default (text='hello world')=>{
const element=document.createElement('div');
element[removed]=text;
return element;
在根目录下创建
webpack
.confi
configuration
.devtool配置应该符合 “^(inline-|hidden-|eval-)?虽然他写了这些都可以，但是我最开始写的cheap-module-eval-source-map报错，不知道为什么，但是eval-cheap-source-map是可以的，我是这样写的。原因：版本5以后devServer下面好像没有stats属性了，好像被提到了外层（只是我的猜测，我也没见过以前的版本文档）可以参考官方文档。
实际上
出错
信息已经说明了问题原因：
Invalid
configuration
object
.
Webpack
has been initialised using a
configuration
object
that does not match the API schema.
这一...
最近初学
webpack
,就遇到了很多难题。通常我们都是按照网上查找的教程来一步一步完成构建，但是我发现
webpack
不同的版本之间语法上存在一定的差异，可能教程是以3.0的版本来讲解的，但是我自己下了一个4.x的版本以后，使用教程来写，各种BUG。
这不，在写完
配置文件
后，又出现了一个新的问题。
第一个问题：_dirname is not defined.
出现这个问题的原因是在dirn...
一般在打包文件或者在生产环境基本配置的时候老是报错不知道什么原因，可能是以下问题（我报错经常的几个原因）
一、关键字没有写对，比如【module写成modules】后者【resolve写成resolver】或者【plugins写成Plugins】等等
二、某个图片或者文件路径写错了，文件名写错了
三、某个文件引入了未调用
四、你写的
webpack
语法过时了，无法显示
五、没有安装一些基础的插件，这个你可以查看这几个博文
学完gulp会发现
webpack
简单一点
总之：不要慌，先检查一下自己经常.
今天有朋友问我wepback报错的解决问题，刚好也是我之前遇到过的，总结一下，以便以后查阅
啰嗦两句，小白 学习
webpack
推荐一个慕课网上的视频
webpack
深入与实战 这个视频是完全免费 这个里面讲的不是最新的
webpack
配置 但是可以让你对
webpack
有一个清晰的认识，以便更快捷的自学
问题一： 运行
webpack
错误
提示
：'
webpack
' 不是内部或外部命令，也不是可...
new Html
Webpack
Plugin({
//模板：以public/index.html文件创建新的html文件
//新的html文件特点：1,结构和原来一致 2，自动引入打包输出的资源
template: path.resolve(__dirname, “…/public/main.html”),
E:\works\ES6>gulp
[20:37:23] Failed to load external module @babel/register
[20:37:23] Requiring external module babel-register
[20:37:26] Using gulpfile E:\works\ES6\gulpfile.babel.
js
[20:...
描述: 一般遇到这个错误，说明你编写的代码语法与本地安装的
webpack
版本不兼容。
原因是项目要用到px转换为rem，使用postcss-px2rem这个插件的时候，0.3.0版本的配置如下：
var px2rem = require('postcss-px2rem');
module.exports = {
module: {
loaders: [
