Webpack

0301

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），==并将其转换和打包为合适的格式供浏览器使用。==

Webpack的工作方式

把你的项目当做一个整体，通过一个==给定的主文件==（如：index.js），Webpack将从这个文件开始找到你的项目的==所有依赖文件==，使用loaders处理它们，==最后打包为一个（或多个）浏览器可识别的JavaScript文件==。

安装

1. 全局安装 (不推荐)

npm install -g webpack

• 安装完本文件夹并没有东西,任何文件夹 npm webpack -v 都能查看webpack版本
• ==全局安装是可以的，但是webpack官方是不推荐的。==
  这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

1. 在项目目录进行安装

• 全局安装完成后，还要进行一个项目目录的安装（本地安装require不到全局的包，这是node的机制问题)
• 在==用npm安装前，先进行一下初始化==，初始化的主要目的是生成package.json文件（里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等）

npm init

// npm说明文件 package.json
{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

• ==在本项目中安装Webpack作为依赖包==

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

package.json 中自动新增
{
 ...
  "devDependencies": {
    "webpack": "^4.29.6" // 开发环境依赖包
  }
 ...
}

• 如果安装速度过慢，使用淘宝的cnpm进行安装： cnpm install –save-dev webpack

开发环境and生产环境：

• 开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。devDependencies
• 生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。dependencies

• 文件目录
  

1. 创建项目目录（自定义）
   

• index.html：目的在于引入打包后的js文件

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）比如说:

• 分析转换scss为css
• 把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件
• 对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件

Babel

Babel其实是一个编译JavaScript的平台，它可以==编译代码==帮你达到以下目的：

• 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
• 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

webpack4_demo

1. 从零开始构建[webpack4] 0314

   看了那么多网上的教程，发现最好的还是官网的....

进度：

1. 引入 ts

2. 加入 eslint

Webpack

原文：https://www.cnblogs.com/sdyz/p/10606981.html