webpack学习笔记-01 初识webpack
文章目录
- 一、什么是webpack？
- 二、和grunt/gulp的对比
- 三、安装
- 四、基本使用
- 五、打包文件
- 六、webpack.config.js配置 和 package.json配置
-
- 6.1 如何动态的打包文件？
- 6.2 指令映射和局部安装
一、什么是webpack？
什么是webpack？
这个webpack还真不是一两句话可以说清楚的。
可以粗鲁的理解为：前端模块化管理工具
我们先看看官方的解释：
At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
但是它是什么呢？用概念解释概念，还是不清晰。
我们从两个点来解释上面这句话：模块 和 打包
二、和grunt/gulp的对比
什么时候用grunt/gulp呢？
如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。
只需要进行简单的合并、压缩，就使用grunt/gulp即可。
但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。
所以，grunt/gulp和webpack有什么不同呢？
grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。
三、安装
npm install [email protected] -g
@ 后边是版本号
-g 是全局安装
四、基本使用
首先来看一下 文件夹目录结构:
src 目录里边是我们开发版本的文件，
接下来看一下我们的代码:
main.js
// 1、使用commonjs的模块化规范
const {
add,mul} = require("./mathUtools")
console.log(add(20,30));
console.log(mul(20,30));
// 2、使用es6的模块化规范
// import {name,age,height} from "./info"
// console.log(name);
// console.log(age);
// console.log(height);
import * as info from "./info"
console.log(info.name);//peng
console.log(info.age);//18
console.log(info.height);//1.75
mathUtools.js:
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
// commonjs的模块化规范
module.exports = {
add,
mul
}
info.js:
// es6的模块化规范
export const name = "peng";
export const age = 18;
export const height = 1.75;
index.html：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
首页
body>
<script src="./dist/bundle.js">script>
html>
五、打包文件
使用到的命令是：webpack ./src/main.js ./dist/bundle.js
打包后会在 dist目录下生成 bundle.js文件
打包过后只需要引入bundle.js即可，它会自动处理我们模块与模块之间的关系。
接下里我们看一下是否打包成功：
嗯，可以发现我们打包成功！
六、webpack.config.js配置 和 package.json配置
6.1 如何动态的打包文件？
如果我们需要只输入webpack命令即可打包指定的文件到指定的目录的话，
那么需要 配置webpack.config.js 和 配置package.json
首先在当前项目下手动创建 webpack.config.js
const path = require("path")
module.exports = {
entry:"./src/main.js",//入口
output:{
// __dirname 当前文件的路径
path:path.resolve(__dirname,"dist"),//需要动态的获取绝对路径
filename:"bundle.js"//打包的文件名
},//出口
}
引入node的path,我们需要先初始化该项目
使用命令 npm init
执行该命令后会要求填写一些信息：
- package name 包的名字 不能使用中文或特殊符号
- description 描述
然后一路回车
之后会在当前目录生成一个package.json，该文件会包含当前项目的一些信息。
6.2 指令映射和局部安装
在package.json文件中 有一个scripts对象，
npm run 指令名都会在scripts里面找有没有对应的key，
如果有，则运行对应的value
如何把 webpack使用npm映射呢？
只需要在scripts对象里加这么一句：
"build":"webpack"
即可
接下来，npm run build即可打包文件！
需要注意的是：在执行该命令时，会优先在本地查找webpack的版本，没有再在全局下查找webpack的版本
而在终端当中使用：webpack命令使用的都是全局的webpack的版本。
如果需要在终端当中不配置package.json而使用本地的话，就需要在终端中进入通过node_modules/.bin/webpack启动webpack打包
那么如何在本地安装webpack呢?
使用命令:npm install [email protected](这里是版本号)--save-dev
dev=>devlop 开发
安装完成过后打开package.json
会发现多了一个devDependencies,它代表的意思是开发时依赖。
对应的是 dependencies，运行时依赖。