webpack是什么?和它的五个核心概念以及两个打包模式

最新推荐文章于 2024-07-28 00:56:04 发布

江北阳小皮～

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量592

点赞数 1

分类专栏： webpack 文章标签：大前端 javascript webpack

本文链接：https://blog.csdn.net/chen4565/article/details/117686652

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack是什么?

Webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)

在Webpack 看来,前端的所有资源文件(js| json | css | img| sass…)都会作为模块处理

它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)

在这里插入图片描述

webpack 的五个核心概念

Enery

入口(Enery)指示 webpack 以那个文件为入口起点开始打包,分析构建内部依赖图

Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名

Loader

Loader 让 webpack 能够去处理那些非JavaScript 文件(webpack 自身只理解JavaScript)

Plugins

插件(Plugins)可以用于执行范围更广的任务,插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量

Mode

区分开发环境和生产环境的编译:development(开发环境)和production(生产环境)

如何区分:
把process.env.NODE_ENV 的值设为 development是开发模式

把process.env.NODE_ENV 的值设为 production是开发模式

webpack 创建和使用

创建:首先我们要创建一个目录,然后初始化 npm 执行 npm init 一路回车,或npm init -y 生成一个package.json文件, 然后在本地安装 webpack ,接着安装 webpack-cli

首先执行以下命令进行 webpack和webpack-cli 的全局安装

npm install webpack webpack-cli -g

然后创建一个项目的文件夹, 使用下面第一个命令进行初始化,生成package.json,执行第二命令进行webpack和webpack-cli的本地安装

npm init -y
npm install webpack webpack-cli --save-dev

简单的使用实例

创建一个webpack-dome文件夹, 然后使用命令安装webpack和webpack-cli

npm init -y
npm install webpack webpack-cli --save-dev

然后在这个项目文件夹中新建一个src文件夹和一个build文件夹,在里面创建两个文件, index.js和aa.js; index.js就是webpack的默认入口文件，而aa.js是index.js中用来举例引用的

在这里插入图片描述
aa.js中的内容为

export default {
    name:'张三',
    age:18
}

然后我们要输入下面的命令进行打包操作

这是开发环境进行打包

webpack ./src/index.js -o ./build --mode=development

这是生产环境进行打包

webpack ./src/index.js -o ./build --mode=production

./src/index.js  指定入口文件
-o    是指定输出文件的放置位置
./build 打包之后的文件(最新版webpack会自动生成一个main.ja,main.ja就是打包后的代码)
--mode=  是指定模式, development为开发模式, production 为生产模式