webpack入门

Posted 2020-11-20 rainlink

Webpack是当下最热门的前端资源模块化管理和打包工具。

它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码隔离。通过loader的转换，任何形式的资源都可以视作模块，比如CommonJS模块、AMD模块、ES6模块、CSS模块、图片、JSON、Coffeescript、LESS等。

简单的来说，Webpack就是一个模块打包器，它对模块的依赖关系进行静态分析，然后把这些模块按照相应的规则放在不同的文件夹里assets。

一，安装webpack

假设你已经安装好了node,如果没有安装请移步Node.js安装及环境配置 ，安装webpack过程；

Windows环境下，通过 cmd 命令 mkdir webpack 新建文件夹webpack;

cmd:cd webpack     //进入webpack文件夹；

执行：

1， npm init 初始化json文件，会新建一个package.json文件；

2， npm i webpack webpack-cli -g //会安装到全局,由于新版webpack将webpack-cli独立出来需要同时安装两个模块；

3，npm i webpack webpack-cli --save //会安装到package.json的dependencies下面， npm i webpack webpack-cli --save-dev 安装到局部并写入package.json在开发环境下的依赖；

 二，基础使用

1，在当前目录新建目录src并新建文件main.js

2，使用webpack main.js命令就可以打包一个js文件