webpack

webpack first one

本着学习的态度去写文章，对于错误或不全支出还望不吝啬的指正出来（无论对错，重在讨论），十分感谢。
开始写文章主要是为了督促自己学习，买了很多很多书，但是每天上完班下来就懒得动，一天一天的过去，天天写业务逻辑，前端知识停滞不前，还附带遗忘属性，有点罩不住。别着急，先练基本功。
起步：对于webpack是运行，是基于nodeJS的，可自行去官网安装电脑系统对应的版本。

1. 初始化

• 使用npm init -y初始化项
• 初始化的文件夹不能为中文名，-y会默认使用文件夹的名字。
• 生成的package.json文件记录了依赖，运行指令等。

2. 安装文本webpack

• 此处使用本地安装，需要安装webpack，和指令集webpack-cli。
• 执行：npm install webpack webpack-cli --save-dev
• 首先对-save和-dev进行说明，dev为development(开发)的简写，-save表示保存到webpack中。
• 根据package.json中可观察到多了一个devDependencies的属性，记录了相关的开发依赖。
• -save可以简写为-S，如果是生产以来，就不需要写-dev。-dev也可以简写为-D。
• 多了个package-lock.json，版本锁。记录安装依赖的具体版本。
• 此时文件夹中多了个node_module文件夹，相关依赖在这个包中，在使用git上传的时候不需要上传（相关的包依赖都会在package.json中）。
• 根目录下创建一个src文件夹，下面创建一个index.js作为入口。
• console.log(123); // 在index.js文件中输入，作为判断打包是否成功的一句。

2. 创建管理文件webpack.config.js

• 创建文件webpack.config.js

// 引入NodeJS自带的path模块，用于解析路径。
const path = require('path');
module.exports = {
  entry: './src/index.js', // 指定入口
  output: {
    filename: 'main.js', // 指定出口的文件命
    path: path.resolve(__dirname, 'dist'), // 指定路径 当前配置文件统计下的dist文件夹
  },
};

• 此时执行：npx webpack --config webpack.config.js。
• 会根据指定入口路径打包出一个main.js文件，观察main.js文件中的文件和index中的是一致的（还加了分号）。
• 在src下面再创建一个module1.js文件。随便写一个函数。使用ES6的模块化规范进行到处。index中进行引用。
• 执行：npx webpack --config webpack.config.js。
• 发现main.js中并没有变化。别急，因为引入后没有使用，是不会被打包的。将引入函数在index下面进行调用，再次打包，发现main.js已经发生了改变。相关引用依赖会被成功打包。
  一次性不宜写太多，不便查看，一般看着长篇文章，读下去是需要很大勇气的。