webpack--摸鱼学习

对webpack的理解一直都是知其然却不知其所以然的状态，所以这次就以初学者角度去看webpack，
把自己碎片一样的前端知识系统化串联起来。

学习点：初始化项目，模块化语法在浏览器运行，打包压缩

初始化项目发现问题，模块化语法无法直接在浏览器环境上运行

首先建个空文件夹，在命令行初始化一个项目
npm init

这个操作会生成一个package.json，可以把它当成包装说明书。
输入项目名，作者等信息，项目就初始化好了，可以执行其他操作了。

然后写a.js,b.js，各自抛出,引入到main.js执行。

//a.js
export const a='123';
export const Add=function(a,b){
    return a+b;
}
//b.js 注意这里用的node模块化抛出语法，对应的引入语法是 require
exports.b='bbb';

//main.js 
import {a,Add} from './a';
var b=require('./b')

console.log(a);
console.log(b);
Add(1,101);

a.js用es6模块化语法抛出
b.js用node模块化方案抛出

(Es6的常规语法（解构赋值，…语法等）可以在 命令行 node 指令运行，但模块化语法不行 )

但是这些js代码引入到html后，却无法在浏览器上运行。

报错：require is not defined（应该是浏览器不直接解析node语法）

换成es6的export试试
报错:Cannot use import statement outside a module（浏览器也不支持es6模块语法）

---

那我想运行在浏览器运行es6模块化语法怎么办？

简单，webpack搞起来

什么是webpack？

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

之前已经全局安装过webpack了，项目中可装可不装

  全局安装是为了让你自己能在命令行使用webpack，项目内安装是为了让你的项目发布后，
  其他人可以在直接使用你的npm命令时使用与你相同版本的webpack。这2者其实是没有相关性的，
  本来就是为了2个不同目的进行的安装。

全局 npm install -g webpack web pack-cli
本地 npm install webpack webpack-cli —save—dev

本地安装后，项目文件夹会多一个node_module文件夹用来存放依赖，
package.json中可以看到安装的依赖，

//package.json
{
  "name": "webpack-study",
  "version": "1.0.0",
  //脚本，里面是你运行项目需要的指令：
  //build：webpack 代表运行build指令，执行webpack操作，把项目打包 
  //运行指令  npm run build 。
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  //开发依赖
  "devDependencies": {
    "webpack": "^5.64.4"
  },
  //生产依赖
  "description": "",
  "dependencies": {}
}

• –save 是装在dependencies中的，是属于生产环境的依赖
• dependencies依赖的包不仅开发环境能使用，生产环境也能使用
• -D，–save—dev是装在devDependencies中的，开发环境依赖，比如打包，vue-cli,sass编译等依赖啥啥的，实际运行用不到那种。

webpack.config.js

打包需要我们新建一个webpack.config.js，这里面是webpack的额外配置项，比如打包好的文件放哪，打包成啥名字等；
简单写一下

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
    path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    
}

项目目录

dist  //打包后的文件夹
src //项目主体文件
Package.json //项目依赖说明，脚本指令说明
Package-lock.json //记录项目内的依赖版本号，别人运行时下载依赖用，防止版本号冲突
webpack.config.js // webpack的配置项

我运行npm run build打包过后，dist文件夹会生成一个bundle.js,里面是打包压缩编译过的代码，把这个js文件引入html，就可以在浏览器运行了。

试了试，不管是es6模块语法，还是node exports代码在浏览器都可以打包运行；