webpack是为现代js程序准备的静态模块打包工具
一:关于对webpack的理解
可以将其认为是一个电脑主板,由于使用js作为源码,因而其可以默认编译js代码(别种类型的文件可以依靠loaders或plugins),因为其底层由node提供支持,因而其支持编译common/esmodule的导入方式。而其被三大框架使用的原因是生态————提供了近乎所有文件的编译工具,这也使得webpack对整个前端工程的支持近乎全面。
二:安装
想要安装使用webpack,应首先确保安装node
截至当前,webpack更新到了5,笔者也使用的webpack5,node最低需12.x.x,可以命令行下使用node -v
查看node版本
命令行下输入以下命令:
//全局安装
npm install webpack webpackcli -g
//局部安装(推荐)
npm install webpack webpackcli -D
- 问题1:推荐局部安装的原因
有时候可能项目的webpack版本不同,不同的webpack可能会存在不兼容
- 问题2:为什么要安装webpackcli,
webpackcli并不是必需的,三大框架并没有安装webpackcli,安装webpackcli是由于当前命令行里需要webpackcli执行webpack内的命令且需要一些参数时,换句话说,此刻webpack需要webpackcli执行带参数的 命令,而webpackcli又依赖webpack(互相依存)
读者也可以指定webpack版本:
// 如:npm install webpack@3.6.0
npm install webpack@xxxxx
三:尝试写一个小demo
- 如果全局安装了webpack:
全局环境下,webpack
命令可以在任一目录中使用
为演示webpack同时支持es6导入导出和common导入导出,以下两个非index.js文件使用两种方式
新建项目目录:
—mydemo
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html
//common.js
// node的导出流
const common_export = function(){
return '我是node的导出流'
}
module.exports = {
common_export
}
//esmodule.js
// es6的导出流
export function es_export(){
return '我是esmodule的导出流'
}
// index.js
import { es_export } from './esmodule'
const { common_export } = require('./common')
console.log(es_export(),common_export());
此时可以在mydemo目录命令行下输入webpack
即可生成一个dist目录,且内部生成一个main.js的文件,即如今项目结构显示如下:
—mydemo
______dist
——————__main.js
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html
假设读者有live-server这个插件且index.html中引入了./dist/main.js这个文件,在live on browers以后控制台会出现打印消息:
此时可以做个总结:
- webpack天然支持js的两种导入导出流
- 在输入webpack后会默认将当前目录下src目录中的index.js作为入口,且会默认在当前目录下生成dist目录并将打包后的js文件合并成./dist/main.js
- webpack天然支持生成静态文件,只需在index.html中引用打包后的main.js文件即可
- 局部使用
局部环境下,想要执行webpack命令,需要将webpack作为node中的一个包使用,此时,需要使用npm包管理器,换句话说,需要node支持
想要使用node环境,需要使用
npm init
命令生成package.json目录,这个目录记录当前npm的一些信息,可以在这里查看已安装的包目录
如果目录中有中文名,可以使用npm init -y
命令,这是由于node对中文的支持并不好
注:于全局目录此时保持一致
- 在新建目录下进行npm初始化
npm init -y
- 下载webpack包
npm install webpack -D
-D是指开发时要用到的依赖,-S是生产环境也要用到的依赖
如果此时package.json中显示有webpack包名,则说明局部安装成功
**注意:**此时此刻想要打包文件,不应使用webpack
命令,因为一但使用webpack
命令,则会使用全局的webpack进行打包————这与初衷不符
如何使用局部webpack命令打包项目?
- 可以使用.bin
使用.bin默认查找node-module下的webpack
.\node_modules\.bin\webpack
- 使用npx
使用npx将优先使用局部webpack,同方法1一样
npm webpack
- package.json的script字段中,使用命令(推荐使用)
如果是这种方式,可以使用npm run build
命令,此时将默认执行局部的webpack命令(本质上,所有局部查找的命令都是查找node-modules里的安装的包并且运行这个包)
作者:致爱丽丝
出处:https://www.cnblogs.com/hjk1124/
共同学习,写下你的评论
评论加载中...
作者其他优质文章