webpack踩坑记录

环境："webpack": "^5.28.0",  "webpack-cli": "^4.6.0", "webpack-dev-server": "^3.11.2"

 

运行npx webpack-dev-server失败

1.Cannot find module 'webpack-cli/bin/config-yargs'

解决方案一：

因为webpack-cli 4.x的启动指令改成了webpack serve

npx webpack serve

解决方案二：

webpack-dev-server是webpack-cli 3.x的指令，版本降回webpack-cli 3.x

npm i webpack-cli@3.3.12

再运行

npx webpack-dev-server

打包成功。

2.解决html-loader打包html中引入的img图片不显示的问题

要添加options

{
   test: /\.html$/,
   loader: 'html-loader',
   options: {
      esModule: false
    }
}

 3.You are using the runtime-only build of Vue where the template compiler is not available.

在webpack中导入vue错误，原来直接import Vue from 'vue' 无法编译模板

import Vue from './node_modules/vue/dist/vue.js'