webpack

官网:https://webpack.js.org

中文网:https://www.webpackjs.com

webpack是一种前端资源构建工具,一个静态模块打包器.在webpack看来,前端的所有资源文件(js/json/css/image/less/sass...)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。

从 v4.0.0 开始,webpack 可以不用再引入一个配置文件来打包项目,然而,它仍然有着高度可配置性,可以很好满足你的需求。

配置文件:  webpack.config.js

 

webpack五个核心概念

entry入口

本项目应该使用哪个模块,来作为构建其内部依赖图的开始(指定打包入口文件)

output输出

在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist

loader

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

plugins

插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

mode模式

通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化

安装webpack

webpack是运行在node环境中的,Node >= 8.10 和 npm >= 5.6

npm init -y

npm i -D webpack webpack-cli

检查模块是否安装成功

使用npx来完成本项目中的命令执行

package.json文件中配置webpack运行脚本命令

执行命令

右侧打赏一下 代码改变世界一块二块也是爱
原文地址:https://www.cnblogs.com/ht955/p/14417380.html