电商网站的学习

1.webpack运行后，提示配置对象无效
报错：
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/” is not an absolute path!

module.exports = {
    entry: './src/script/main.js',
output: {
    filename: 'bundle.js',
    path: './dist/js/'
 }
 }

解决办法：

这个报错显示的是你的文件路径不是绝对路径。
path: __dirname + "/dist/js", webpack2的写法

2.冲突：多个资产发射到相同的文件名
报错：
ERROR in chunk html [entry]
app.js
Conflict: Multiple assets emit to the same filename app.js

  entry: {
    'javascript': "./js/app.js",
    'html': "./index.html",
  },
  output: {
    path: __dirname + "/dist",
    filename: "app.js",
  }

解决办法：

如果您的配置创建多个“块”（如使用多个入口点或使用像CommonsChunkPlugin这样的插件），则应使用替换来确保每个文件具有唯一的名称。

[name] 被块的名称取代。

改为：
 output: {
    path:__dirname+'/dist/js',
    filename:'[name].js'
}

3.webpack ./src/page/index/index.js/ ./dist/app.js 报错
报错：
这里写图片描述
解决办法：

在webpack 4中键入webpack --help从webpack获得的帮助消息。
Usage without config file: webpack <entry> [<entry>] --output [-o] <output>

注意： - 输出需要明确指定。
所以改为--webpack ./src/page/index/index.js --output ./dist/app.js --mode development

4.警告 WARNING in configuration The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment

解决办法：

是因为使用webpack没有指定mode为 development（开发模式）或者为production（生产模式）

package.json文件中加入
"scripts": {  
  "dev": "webpack --mode development",  
  "build": "webpack --mode production"  
}

5.执行webpack-dev-server报错
Cannot find module ‘webpack/bin/config-yargs’
解决办法：一般情况是因为Webpack与webpack-dev-server版本不兼容导致。

6.安装和引入了hogan包，但是’hogan’还是报错

原：var Hogan = require('hogan');

改为：npm install hogan.js --save-dev

     // 引入hogan
   var hogan = require('hogan.js');

猜你喜欢