webpack的安装

Posted allisson

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack的安装相关的知识,希望对你有一定的参考价值。

1、新建文件夹,英文,不要整中文。按住shift右键打开Powershell这个窗口。输入命令:npm init -y 初始化

 

2、输入npm i webpack webpack-cli -D安装webpack。(或者输入npm i webpack -D  再次输入 npm i webpack-cli -D)

 

3、手动建立webpack.config.js

 

核心概念

  • Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
  • Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。(在产出的html文件里引入哪些代码块)
  • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
  • Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
  • Output:输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果。

2 webpack的工作流程

1、 Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。

2 每找到一个 Module, 就会根据配置的Loader去找出对应的转换规则,对 Module 进行转换后,再解析出当前 Module 依赖的 Module。

3 这些模块会以 Entry 为单位进行分组,一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。

4 最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

 

以上是关于webpack的安装的主要内容,如果未能解决你的问题,请参考以下文章

webpack安装之后不显示版本号?

【Web前端基础】webpack全局安装失败怎么办?

怎么检查webpack有没有安装过

如何安装webpack及运行webpack

使用webpack---安装webpack和webpack-dev-server

安装webpack后还是提示webpack不是内部命令