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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。