Webpack学习笔记（一）——介绍及入口文件

介绍

开发模式：仅仅能编译Js中的 Es module语法

生产模式：能编译Js中的 Es module语法,还能压缩JS代码

• npx侧重于执行命令的，执行某个模块命令。虽然会自动安装模块，但是重在执行某个命令。

• npm侧重于安装或者卸载某个模块的。重在安装，并不具备执行某个模块的功能。

• npx非常智能的识别模块，如果模块存在，就使用。如果不存在，就临时下载，用完就删除。

• 使用某个node模块的时候，根本不用关心是否安装过了。npx会给你最满意的答案（没有对应模块就临时下载）。

所以，不使用特殊参数的npx命令的基本逻辑是：先检查当前项目node_modules/下，是否存在。不存在的话，就检查全局是否已经安装对应的模块。如果还没有的话，就去仓库里面去下载对应的模块，下载完毕就执行。执行完毕就删除，不留下一丝痕迹！

首先进行项目初始化

npm init -y

然后运行webpack

development模式

npx webpack ./src/main.js --mode=development

production模式

npx webpack ./src/main.js --mode=development

结果：

基础入口文件配置

const path = require("path");

*module*.*exports* = {

 // 入口

 entry: "./src/main.js", //相对路经

 // 输出

 output: {

  //__dirname代表当前文件的文件夹目录

  path: path.resolve(__dirname, "dist"), //绝对路径

  filename: "main.js",

 },

 // loader

 module: {

  rules: [],

 },

 // Plugin

 plugins: {},

 // 模式

 mode: "development",

};