起步

基本安装

首先我们创建一个目录，初始化 npm，然后在本地安装 webpack ，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpacktest
cd webpacktest
npm init -y
npm install webpack webpack-cli --save-dev
||或者-D 两者相等
npm i webpack webpack-cli -D

创建出来的项目结构

webpacktest
+ |- /node_modules
+ |- package-lock.json
+ |- package.json

添加文件内容并开始打包

webpacktest
  |- /node_modules
+ |- /src
+   |- index.js
  |- package-lock.json
  |- package.json

随便在index.js中加点内容

var text = '测试打包';
console.log(text);

开始打包

打包命令一：
在webpacktest项目下打开终端，执行npx webpack，打包成功会生成一个dist目录和里面的一个main.js，main.js就是打完包的内容。

webpacktest
  |- /node_modules
+ |- /dist
+   |- main.js
  |- /src
    |- index.js
  |- package-lock.json
  |- package.json

打包后去掉了多余的变量声明，直接进行输出，内容如下

console.log("测试打包");

打包命令二：
考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。调整 package.json 文件，添加一个 npm script ：

 {
   "name": "webpacktest",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.20"
   }
 }

三：指定打包配置，进行打包
package.json 中指定

{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack"
+    "build": "webpack --entry ./src/index.js --output ./build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"lodash": "^4.17.20"
}
 }

命令行中指定

npx webpack --entry ./src/index.js

四：指定打包配置文件，进行打包

npx方式：
npx webpack --config webpack.config.js
命令行npm方式：
package.json中修改
"scripts": {
  "build": "webpack --config webpack.config.js"
},
npm run build
注意：
--config 为指定配置文件打包
后面的webpack.config.js为配置文件名，可以为任何符合配置规则的文件名

自定义webpack配置文件

在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。所以让我们创建一个配置文件：

webpacktest
  |- /node_modules
  |- /dist
    |- main.js
  |- /src
    |- index.js
  |- package-lock.json
  |- package.json
+ |- webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

上面为webpack.config.js初始化内容，到此webpack打包起步就可以运转了，更多打包配置内容见下一张。奥里给