webpack（2）

1、了解webpack是什么？（摘选官方手册）

• （1）本质上是一个现代的javascript应用程序的静态模块打包器；（详情参考官网）

• （2）了解其中四大基本概念；

  • 一、入口（entry）
  • 二、输出（output）
  • 三、加载（loader）
  • 四、插件（plugins）

---

2、直接上手（怎样使用webpack)

• （1）安装webpack

  • 一、安装前提：

    • （1）node v（版本）8.11.3 或其余
    • （2）npm v（版本）6.4.1 或其余
    • （3）新建一个空白的文件夹：命名 webpackdemo

    • （4）在该文件打开cmd命令界面：操做 按住shift 鼠标右键在此处打开命令窗口

      备注：安装webpack须要使用npm的部分指令，在此我也列出npm经常使用的指令，（如下的术语是我本身方便理解本身取的名字）

      • npm init -y 【初始化 生成一个package.json文件，里面有些基本配置，能够手动生成，也能够修改，但如今不须要】
      • npm install(能够简写为 i) 模块名（好比：webpack）-g【 安装模块自动生成node_modules目录，这个命令是全局安装，也就是说，它会为本机添加webpack运行的环境变量，你在控制台cmd输入命令（好比：webpack -v）便可查看webpack当前版本信息】官方手册不推荐使用全局安装。
      • npm i 模块名 --save-dev【安装模块 该安装是将模块安装为开发时依赖，意思是该模块是在程序员开发项目时，就须要依赖该模块，该模块名会自动出如今 package.json中好处：能够简化输入脚本命令。】实例：使用全局安装时命令：请输入代码使用局部安装命令：请输入代码。
      • npm i 模块名 --save。
      • npm install 【直接使用该命令便可安装当前项目全部依赖的模块，不过内存占用太大】

  • 二、安装webpack

    1. npm init -y
    2. npm i webpack --save-dev
    3. npm i webpack-cli --save-dev
    4. 对上诉3步骤的介绍：初始化产生package.json文件，安装webpack模块为开发时依赖。为何须要安装webpack-cli？webpack版本已经更新到4.25.1，该版本必须依赖webpack-cli，安装顺序不能变，若是变了可能会报错此处附上本人github上的代码webpackdemo

---

3、写这篇文章的缘由

• 本身在学习参考网上的教程时，遇到了好多坑，参考官方手册，全是英文，又看不懂，因此就准备本身把坑与你们分享，其实这是个人第一篇文章，有点小激动，有错误的地方但愿你们指出百度