webpack安装和使用

mkdir webpack_demo

cd webpack_demo

//npm初始化

npm init

//然后一直回车

安装webpack

// 不建议全局安装

cnpm install webpack --save-dev

// --save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。

然后问题就出现了，安装失败

提示大概是某个资源被占用了，我是打开了webpack_demo这个文件夹，关闭后重新安装就可以了

如果此上面的方法不行可以尝试

1.

可以清除npm缓存 执行命令 npm cache clean --force

2.

关闭cmd，重新以管理员身份运行，还是不可以可以换npm安装

可以清除npm缓存 执行命令 npm cache clean --force

可以开始学习了，先建一个测试项目

1.目录结构

| dist

    - index.html

| node_modules

| src

    - index.js

2.完善文件内容

// index.js

import _ from 'lodash';

function component() {

  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;

}

document.body.appendChild(component());
// index.html

<!doctype html>

<html>

  <head>

    <title>Getting Started</title>

  </head>

  <body>

    <script src="./bundle.js"></script>

  </body>

</html>

3.执行命令

// 执行命令

$ npx webpack src/index.js --output dist/bundle.js

 这里提示安装 webpack-cli

 是因为到了webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli：

// 安装webpack-cli

cnpm install webpack-cli --save

但是结果报错了，尝试不同的安装方法，最后提示删除node_modules重新安装，全部重新安装一下就可以了

重新运行命令：npx webpack src/index.js --output dist/bundle.js

C:\Users\waiso\Desktop\webpack_demo>npx webpack src/index.js --output dist/bundle.js

Hash: e15bb286b37347af5a92

Version: webpack 4.30.

Time: 14877ms

Built at: -- ::

    Asset      Size  Chunks             Chunk Names

bundle.js  70.3 KiB         [emitted]  main

Entrypoint main = bundle.js

[] ./src/index.js  bytes {} [built]

[] (webpack)/buildin/global.js  bytes {} [built]

[] (webpack)/buildin/module.js  bytes {} [built]

    +  hidden module

WARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
// 有一个警告

// 说'mode'没有定义，这是 webpack  4x 引入的，有两个值，development 和 production。默认是production.
由于webpack 默认的入口文件是从./src/index.js,输出是./dist/main.js 。因此可以直接 npx webpack --mode development
C:\Users\waiso\Desktop\webpack_demo>npx webpack --mode development

Hash: 28727f4b342f5cb8a364

Version: webpack 4.30.

Time: 1685ms

Built at: -- ::

  Asset     Size  Chunks             Chunk Names

main.js   KiB    main  [emitted]  main

Entrypoint main = main.js

[./node_modules/_webpack@4.30.@webpack/buildin/global.js] (webpack)/buildin/global.js  bytes {main} [built]

[./node_modules/_webpack@4.30.@webpack/buildin/module.js] (webpack)/buildin/module.js  bytes {main} [built]

[./src/index.js]  bytes {main} [built]

    +  hidden module

webpack4重新梳理一下的更多相关文章

  1. webpack4重新梳理一下2

    上一篇已经实现了webpack的基本打包操作,但是并没有使用配置文件,而是使用 CLI 来实现打包. 配置文件 // webpack.config.js module.exports = { //入口 ...

  2. webpack4 从零学习常用配置梳理

    webpack 的核心价值就是前端源码的打包,即将前端源码中每一个文件(无论任何类型)都当做一个 pack ,然后分析依赖,将其最终打包出线上运行的代码.webpack 的四个核心部分 entry 规 ...

  3. webpack4.16压缩打包

    webpack4.16压缩打包 本文所用插件版本如下: nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快,差不多几个月就会出一版,最新的4系列 ...

  4. 【初码干货】在Window Server 2016中使用Web Deploy方式发布.NET Web应用的重新梳理

    在学习和工作的过程中,发现很多同事.朋友,在做.NET Web应用发布的时候,依然在走 生成-复制到服务器 这样的方式,稍微高级一点的,就是先发布到本地,再上传到服务器 这种方式不仅效率低下,而且不易 ...

  5. [SQL] SQL 基础知识梳理（一）- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理（二） - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理（三） - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理（四） - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理（五） - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

随机推荐

  1. （动态规划 01背包 打印路径） CD --UVA --624

    链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87813#problem/G 每个CD的时间不超过 20没有哪个CD的时间是超过N ...

  2. WC Java 实现

    项目 github 地址 一. 实现情况 基本要求 c 统计文件字符数 (实现) w 统计文件词数 (实现) l 统计文件行数(实现) 扩展功能 s 递归处理目录下符合条件得文件(实现) a 返回文件 ...

  3. 配置Jenkins构建失败触发邮件报警机制

    系统管理 1.进入系统管理-->系统设置 定位到Jenkins Location配置项   配置系统管理员邮件地址 系统管理员邮件地址需要同发送报警邮件地址相同 定位到邮件通知   配置SMTP ...

  4. 谈谈XAML前端开发

    GUI的发展 在图形用户界面的操作系统(Windows,MAC)出现之前,计算机软件是命令行界面的程序,用户和程序的交互是通过输入命令,查看命令运行结果进行的.当然很不友好.后来出现了文本图形界面的程 ...

  5. .net生成条形码

    1..net 标准库(.net standard 2.0) Nuget添加引用:ZXing.Net生成条形码,ZXing.Net.Bindings.ImageSharp生成图片 public stat ...

  6. Mac OS 10.12 - 安装任何来源软件！！

    今天想安装一个从网上下载的软件到Mac OS 10.12中,结果没有想到Mac告诉我那个软件已经损坏,害得我删除了!! 最后通过热心网友的帮助,顺利解决了这个安装问题,重新安装并且使用上了这款软件,下 ...

  7. Django 一些少用却很实用的orm查询方法

    一.使用Q对象进行限制条件之间 "或" 连接查询 from django.db.models import Q from django.contrib.auth.models im ...

  8. django 自定义中间件 middleware

    Django 中间件 Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强 ...

  9. Jmeter测试计划要素

    Jmeter中一个脚本就是一个测试计划,也是一个管理单元.Jmeter的请求模拟与并发数(设置线程数,一个线程即代表一个虚拟用户)设置都在脚本文件中一起设置. 测试计划要素如下: 1.脚本中测试计划只 ...

  10. [bug]小米部分机型(5x、mix2)中，文字/背景闪现然后消失

    2/9更新 后来遇到float 元素也这样,改成flex布局就没问题.不知道具体原因. 描述: 使用vue 2.4开发HTML5时,遇到在小米部分机型(5x.mix2)中,文字/文字背景闪现然后消失. ...