第一个错误:

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:

We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

解决方法:npm install webpack-cli -g (升级为wekpack需要再安装webpack-cli)

第二个人错误:

解决方法:出现这个错误提示并不是我们环境装错了,而是webpack4 更新后对webpack语法进行了更严格的要求

之前的命令被修订为 npm webpack a.js --output-filename bundle.js --output-path . --mode development

第三个错误:

解决方法:webpack.config.js里面module里面的loaders改成rules

module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
rules: [//原来是loaders
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};

webpack打包配置中出现的问题的更多相关文章

  1. 【nodejs代理服务器二】nodejs webpack打包配置踩坑总结

    接着上篇用Nodejs开发web代理,防止web渗透.如果部署到正式环境,需要进行打包配置. 我在用webpack打包配置中遇到了几个错误,总结如下: webpack环境变量问题 https://ww ...

  2. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  3. webpack打包配置禁止html标签全部转为小写

    用webpack打包页面,发现html中特别写的用来给后端识别的大写标签全部被转为了小写标签,这时候需要将加一个配置 ,caseSensitive:true ,禁止大小写转换. webpack配置: ...

  4. webpack打包文件中的@符号表示什么意思

    在看使用webpack打包的项目代码时,经常会看到在路径中引用@符号 import one from '@/views/one.vue' 那这里的@符号到底表示什么意思呢? 这其实利用了webpack ...

  5. vue-cli中的webpack打包配置

    如下: assetsSubDirectory: 'static', assetsPublicPath: '/projectName/', 其中assetsSubDirectory是代表服务器上的实际路 ...

  6. vue 应用生产环境的 webpack 打包配置优化

    转:https://blog.csdn.net/robin_star_/article/details/83856363 前言:很好的打包优化的帖子,还没来的急去实测验证 1. 去掉 console ...

  7. webpack打包配置模板

    /** * Created by zzq on 2017/3/26. *///__dirname是node.js中的一个全局变量,它指向当前执行脚本所在的目录module.exports = {//注 ...

  8. 在找一份相对完整的Webpack项目配置指南么?这里有

    Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...

  9. webpack打包性能优化

    1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 var CompressionWebp ...

随机推荐

  1. navicat连接Oracle数据库提示错误 ORA-12514

    这个是服务名写错了,服务名的字段在Oracle安装路径里找 这个我的服务名,这好像是重装Oracle就会变我之前的事orcl,重装之后发现连接不上数据库了,就倔强着找到了它 备注:如果是连接远程Ora ...

  2. Collection集合家族

    集合家族 数组:存储相同类型的多个元素 对象:存储不同类型的多个元素 集合:存储多个不同类型的对象 List List继承自Collection接口,是有序可重复的集合. 它的实现类有:ArrayLi ...

  3. linux篇之Nginx web服务器简单部署

    一.安装部署nginx 1. 部署前先对nginx介绍下别嫌BB: 如果你听说或使用过Apache软件,那么很快就会熟悉Nginx软件,与Apache软件类似, Nginx(“engine x”)是一 ...

  4. python常用函数 O

    OrderedDict() 保持dict元素插入顺序. 例子: open(path) 可以对文件进行操作,有'r'读模式.'w'写模式.'a'追加模式.'b'二进制模式.'+'读/写模式等,操作完需要 ...

  5. 抽象类(abstract)与接口(interface)的区别

    如果一个类中包含抽象方法,那么这个类就是抽象类.abstract只能用来修饰类或者方法,不能用来修饰属性. 接口是指一个方法的集合,接口中的所有方法都没有方法体.接口通过关键字interface实现. ...

  6. linux shell 指令

    一.文件比较运算符 1. e filename 如果 filename存在,则为真 如: [ -e /var/log/syslog ] 2. -d filename 如果 filename为目录,则为 ...

  7. C#基础提升系列——C# 泛型

    C# 泛型(Generics) 泛型概述 泛型是C#编程语言的一部分,它与程序集中的IL(Intermediate Language,中间语言)代码紧密的集成.通过泛型,我们不必给不同的类型编写功能相 ...

  8. C#-弄懂泛型和协变、逆变

    脑图概览 泛型声明和使用 协变和逆变 <C#权威指南>上在委托篇中这样定义: 协变:委托方法的返回值类型直接或者间接地继承自委托前面的返回值类型; 逆变:委托签名中的参数类型继承自委托方法 ...

  9. css linear-gradient;心跳animation

    css线性背景 background:linear-gradient(20deg,#ccffff,#ffcccc); transform transform:scale(1.5); transform ...

  10. Vue学习笔记-作用域插槽

    有时候我们希望子组件的内容由父组件决定如何展示,这个时候子组件的数据父组件并不能访问到,而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数. <div id=" ...