选取一个空目录来试验

全局安装webpack4.1之后

创建目录

mkdir webpacktest && cd webpacktes

初始化package.json

npm init -y;

然后文件目录中安装webpack

npm i webpack@next --save-dev  @next我也不知道是什么意思

安装cli工具

npm i webpack --save-dev

再在package.json中配置script

"script":{

  "build":"webpack"

}

这个时候直接运行webpack肯定是会报错的。之前的版本需要webpack.congfig.js里面配置一大堆东西;

现在不需要了

直接建立你想要的文件

例如./src/index.js

随笔写几句代码  console.log('new webpack 4.0 is so easy');

npm run build

可以看到直接打包好了放在./dist/main.js中

index.js运行结果和main.js一样。说明咱们的操作是对的;庆祝下吧。

之前参考一些文章。例如 :入门webpack这篇文章就够了;按照上面的步骤根本走不下来。

还遇到错误提示

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

只需要在package.json中添加配置项:

"scripts": {

  "dev": "webpack --mode development",

  "build": "webpack --mode production"

}

然后npm run dev  这个时候dist里面的文件的不是压缩过的

但是npm run build 这个时候dist的main.js就是压缩了的。哈哈  很高兴吧

webpack 4.0 配置方法以及错误解决的更多相关文章

  1. 安卓安装提示:Android SDK requires Android Developer Toolkit version 21.1.0 or above. (错误解决方法)

    安卓安装提示:Android SDK requires Android Developer Toolkit version 21.1.0 or above.  (错误解决方法) 主要是因为版本号不正确 ...

  2. Linux 出现telnet: 127.0.0.1: Connection refused错误解决办法

    Linux 出现telnet: connect to address 127.0.0.1: Connection refused错误解决办法 没有xinetd服务: 1./etc/init.d目录中放 ...

  3. 史上最详细 Python第三方库添加方法 and 错误解决方法

    (1):如何添加python第三方库(方法一): File ->> Settings... ->> Project Interpreter (2):如何添加python第三方库 ...

  4. ganglia监控hadoop2.0配置方法

    ganglia监控hadoop2.0配置方法前提:hadoop2.0集群已安装ganglia监控工具第一步:Hadoop用户登录集群每一个节点,修改文件:vi /opt/hadoop-2.0.0-cd ...

  5. win10+VS2015+opencv3.4.0配置方法

    win10+VS2015+opencv3.4.0配置方法 操作环境: windows10 64位opencv 3.4.0:https://opencv.org/releases.html(选择open ...

  6. webpack2.0 css文件引入错误解决及图片输出在根目录配置问题

    webpack引入css文件,main.js内容如下 import Vue from 'vue'; import App from './App.vue'; import Mint from 'min ...

  7. webpack 4.0配置2

    上个博客记录了webpack 的基本配置今天主要是css-loader的介绍,包括单独提出css,压缩css.js文件 这里使用的插件npm 地址:https://www.npmjs.com/pack ...

  8. MySQL 8.0安装以及初始化错误解决方法

    MySQL 8.0 安装配置及错误排查 官网下载 CentOS7环境下的具体安装步骤 初始化MySQL发生错误的解决方法 忘记数据库root密码 官网下载 mysql官网下载链接:https://de ...

  9. Target runtime Apache Tomcat v6.0 is not defined.错误解决方法

    一.背景 最近在使用本地的tomcat进行运行项目的时候,发现出现了如题所述的问题.不知道什么原因,经过努力解决了该问题. 二.解决步骤 右击项目---选择属性---选择targeted runtim ...

随机推荐

  1. 【转载】SQL实例大全

    from:http://blog.csdn.net/basycia/article/details/52134279 OR from:http://www.cnblogs.com/yubinfeng/ ...

  2. Linux-本地日志服务管理(rsyslog基础)

    目录 系统环境 1.常见的两种日志管理服务 1.1 RSYSLOG系统日志服务 1.2 ELK 2.RSYSLOG日志服务的相关知识 2.1 RSYSLOG日志消息级别 2.2 RSYSLOG日志服务 ...

  3. AVCaptureSession部分用法

    原文链接 AVCaptureSession阻塞主线程问题 前阵子程序中出现了一个奇怪的 bug,在 iOS 系统上,页面弹出的时候会卡很久,相机始终黑屏,大概6-7秒钟,跟踪具体每个步骤花费时间的时候 ...

  4. centos7 安装 nginx-1.18.0 并设置开机自启动

    一.到官网下载nginx Mainline  version:  nginx主力版本,为开发版 Stable version: 稳定版,在生产环境中选择此版本进行安装 Legacy versions: ...

  5. Android 12(S) 图形显示系统 - 初识ANativeWindow/Surface/SurfaceControl(七)

    题外话 "行百里者半九十",是说步行一百里路,走过九十里,只能算是走了一半.因为步行越接近目的地,走起来越困难.借指凡事到了接近成功,往往是最吃力.最艰难的时段.劝人做事贵在坚持, ...

  6. @Autowired @Qualifier @Resource

    @Autowired 用于对Bean的属性变量,属性的setter()方法及构造方法进行标注,配合对应的注解处理器完成Bean的自动装配工作.默认按照Bean的类型进行装配. @Resource 其作 ...

  7. vscode使用python虚拟环境

    vscode使用python虚拟环境 创建好虚拟环境之后,在vscode中配置使用python的虚拟环境. 首先打开设置,然后搜索python venv, 在python: Venv Path中设置为 ...

  8. OOS 预览报错解决思路

    预览报错解决思路: 官方链接:https://docs.microsoft.com/zh-cn/officeonlineserver/office-online-server :> 查看服务器内 ...

  9. 通过webgoat-xxe、jwt学习Java代码审计

    WebGoat-JWT JWT Tokens 01 概念 本课程将介绍如何使用JSON Web Token(JWT)进行身份验证,以及在使用JWT时需要注意的常见陷阱. 目标 教授如何安全地实现令牌的 ...

  10. Spring对DAO的支持?

    Spring对数据访问对象(DAO)的支持旨在简化它和数据访问技术如JDBC,Hibernate or JDO 结合使用.这使我们可以方便切换持久层.编码时也不用担心会捕获每种技术特有的异常.