webpack解析(1)

webpack是为现代js程序准备的静态模块打包工具

一：关于对webpack的理解

二：安装

想要安装使用webpack,应首先确保安装node

截至当前，webpack更新到了5，笔者也使用的webpack5,node最低需12.x.x，可以命令行下使用node -v查看node版本

命令行下输入以下命令：

//全局安装
npm install webpack webpackcli -g

//局部安装(推荐)
npm install webpack webpackcli -D

• 问题1：推荐局部安装的原因

• 问题2：为什么要安装webpackcli，

读者也可以指定webpack版本：

// 如：npm install [email protected]
npm install webpack@xxxxx

三：尝试写一个小demo

• 如果全局安装了webpack:
  全局环境下，webpack命令可以在任一目录中使用

新建项目目录：
—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以后控制台会出现打印消息：

此时可以做个总结：

1. webpack天然支持js的两种导入导出流
2. 在输入webpack后会默认将当前目录下src目录中的index.js作为入口，且会默认在当前目录下生成dist目录并将打包后的js文件合并成./dist/main.js
3. webpack天然支持生成静态文件，只需在index.html中引用打包后的main.js文件即可

• 局部使用
  局部环境下，想要执行webpack命令，需要将webpack作为node中的一个包使用，此时，需要使用npm包管理器，换句话说，需要node支持

1. 在新建目录下进行npm初始化
   npm init -y
2. 下载webpack包
   npm install webpack -D
   -D是指开发时要用到的依赖，-S是生产环境也要用到的依赖
   如果此时package.json中显示有webpack包名，则说明局部安装成功
   

注意：此时此刻想要打包文件，不应使用webpack命令，因为一但使用webpack命令，则会使用全局的webpack进行打包————这与初衷不符
如何使用局部webpack命令打包项目？

1. 可以使用.bin

1. 使用npx

1. package.json的script字段中，使用命令(推荐使用)
   
   如果是这种方式，可以使用npm run build命令，此时将默认执行局部的webpack命令（本质上，所有局部查找的命令都是查找node-modules里的安装的包并且运行这个包）

下一记：webpack本身的配置以及其loader配置