webpack安装和使用

  1. mkdir webpack_demo
  2. cd webpack_demo
  3.  
  4. //npm初始化
  5. npm init
  6. //然后一直回车

安装webpack

  1. // 不建议全局安装
  2. cnpm install webpack --save-dev
  3.  
  4. // --save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。

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

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

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

1.

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

2.

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

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

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

1.目录结构

  1. | dist
  2.     - index.html
  3. | node_modules
  4. | src
  5.     - index.js

2.完善文件内容

  1. // index.js
  2. import _ from 'lodash';
  3. function component() {
  4.   var element = document.createElement('div');
  5.  
  6.   // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  7.   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  8.  
  9.   return element;
  10. }
  11.  
  12. document.body.appendChild(component());
  1. // index.html
  2. <!doctype html>
  3. <html>
  4.   <head>
  5.     <title>Getting Started</title>
  6.   </head>
  7.   <body>
  8.     <script src="./bundle.js"></script>
  9.   </body>
  10. </html>

3.执行命令

  1. // 执行命令
  2. $ npx webpack src/index.js --output dist/bundle.js

 这里提示安装 webpack-cli

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

  1. // 安装webpack-cli
  2. cnpm install webpack-cli --save

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

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

  1. C:\Users\waiso\Desktop\webpack_demo>npx webpack src/index.js --output dist/bundle.js
  2. Hash: e15bb286b37347af5a92
  3. Version: webpack 4.30.
  4. Time: 14877ms
  5. Built at: -- ::
  6.     Asset      Size  Chunks             Chunk Names
  7. bundle.js  70.3 KiB         [emitted]  main
  8. Entrypoint main = bundle.js
  9. [] ./src/index.js  bytes {} [built]
  10. [] (webpack)/buildin/global.js  bytes {} [built]
  11. [] (webpack)/buildin/module.js  bytes {} [built]
  12.     +  hidden module
  13.  
  14. WARNING in configuration
  15. 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.
  16. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
  1. // 有一个警告
  2. // 说'mode'没有定义，这是 webpack  4x 引入的，有两个值，development 和 production。默认是production.
  1. 由于webpack 默认的入口文件是从./src/index.js,输出是./dist/main.js 。因此可以直接 npx webpack --mode development
  1. C:\Users\waiso\Desktop\webpack_demo>npx webpack --mode development
  2. Hash: 28727f4b342f5cb8a364
  3. Version: webpack 4.30.
  4. Time: 1685ms
  5. Built at: -- ::
  6.   Asset     Size  Chunks             Chunk Names
  7. main.js   KiB    main  [emitted]  main
  8. Entrypoint main = main.js
  9. [./node_modules/_webpack@4.30.@webpack/buildin/global.js] (webpack)/buildin/global.js  bytes {main} [built]
  10. [./node_modules/_webpack@4.30.@webpack/buildin/module.js] (webpack)/buildin/module.js  bytes {main} [built]
  11. [./src/index.js]  bytes {main} [built]
  12.     +  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. linux导出Excel The maximum column width for an individual cell is 255 characters

    linux环境到处Excel报错: The maximum column width for an individual cell is 255 characters 解决方案: for (int i ...

  2. 磁盘配额（Quota)的应用与实践

    1>什么是Quota      在Linux中,由于是多用户,多任务的环境,所以会有多用户共同使用一个硬盘空间的情况发生,如果其中有少数几个用户大量占用掉了硬盘空间的话,那肯定影响其他用户的使 ...

  3. WPF中得到一个控件相对其他控件的坐标

    加入想得到按钮btnTest左上角相对于主窗体winTest的坐标,可以用如下方法:btnTest.TranslatePoint(new Point(0, 0), winTest)这个方法返回一个Po ...

  4. zabbix-server启动报错解决

    启动zabbix-server有如下报错: 29171:20180714:084911.367 cannot start alert manager service: Cannot bind sock ...

  5. matlab中使用正弦波合成方波（带动画）

    x=:*pi; :: s=; ::step s = s+/i*sin(i*x); end plot(s);set(figure(),'visible','off'); filename=[num2st ...

  6. 我也谈谈.NET程序员工资低

    我从2011年下半年预谋转型,2012春季正式转型到iOS,看了<经过本人 6 年.net 工作经验证明 .net 工资确实比 Java 低>这篇文章,一下子有很多感慨. 我不好意思算我干 ...

  7. LeetCode142：Linked List Cycle II

    题目: Given a linked list, return the node where the cycle begins. If there is no cycle, return null. ...

  8. 如何使用T-SQL备份还原数据库及c#如何调用执行？

    准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup database 数据库名 to disk='保存路径 ...

  9. f.lux在linux下的安装和使用

    安装还是蛮容易的~只是装完后在白天色温没什么变化就一直以为没有装成功 https://justgetflux.com/linux.html 这里下载,解压后 安装好以后xflux -l (经纬度) 就 ...

  10. 第七章 ReentrantLock总结

    常用方式: int a = 12; //注意:通常情况下,这个会设置成一个类变量,比如说Segement中的段锁与copyOnWriteArrayList中的全局锁 final ReentrantLo ...