第一个错误:

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. JS-03 牛客网练习

    1.很多人都使用过牛客网这个在线编程网站,下面是自己做的该项所有练习,已通过网站和老师检查无误,分享给大家. 2.先说一下题目的位置:牛客网https://www.nowcoder.com/activ ...

  2. es5和es6中的this指向问题

    const test ={ id:2, a:function(){ var a_this=this; setTimeout(function(){ console.log('a:',this,a_th ...

  3. Sass-@while

    @while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为 false 时停止循环.这个和 @for 指令很相似,只要 @while 后面的条件为 ...

  4. solrJ 基本使用

    添加: PropertiesUtils pro = new PropertiesUtils();String path = pro.load("solr.properties", ...

  5. 第01章 Spring概述

    第01章 Spring概述 1.Spring概述 ①Spring是一个开源框架 ②Spring为简化企业级开发而生,使用Spring,JavaBean就可以实现很多以前要靠EJB才能实现的功能.同样的 ...

  6. phpstrom 安装

    环境: ubuntu18.4 一. 安装 1. 下载安装包.tar.gz 下载地址:https://www.jetbrains.com/phpstorm/download/#section=linux ...

  7. gulp为css,js添加版本号

    由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下: 1.安装gulp插件 npm install --save-dev gulp-rev (version:9 ...

  8. RIME-使用小心得

    从4月份我才接触到RIME输入法,当时的感觉上相见恨晚的,现在感觉也不错,时至今日,想写点东西,也算是小感触吧. RIME称为中州韵输入法引擎,是开放源代码的输入法软件,其主页是http://rime ...

  9. hdu 2665 Kth number (poj 2104 K-th Number) 划分树

    划分树的基本功能是,对一个给定的数组,求区间[l,r]内的第k大(小)数. 划分树的基本思想是分治,每次查询复杂度为O(log(n)),n是数组规模. 具体原理见http://baike.baidu. ...

  10. Linux中的touch命令总结(一)

    touch命令有两个主要功能: 改变 timestamps 新建_空白_文件 例如,不带任何参数地输入: touch file1 file2 file3 将在当前目录下新建三个空白文件:file1, ...