webpack安装、配置

webpack官网概念:

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

开始：

首先确保安装了node.js

1.初始化、安装

创建一个文件夹，在文件夹地址栏输入   cmd

如图：

进入命令页：

//初始化
npm init  -y

//安装  
npm i webpack webpack-cli -D

 2.配置文件

打开开发工具：

在文件根目录创建   webpack.config.js

webpack核心概念：

entry：入口

output：出口

plugin：插件

loader：加载器

mode：模式

devServer：本地服务器

开始配置：

创建一个src目录 在src下 创建 index.js 作为入口文件  在创建一个实验文件。测试是否打包成功，

#  index.js
import elem from "./first.js";
document.body.appendChild(elem);


#  first.js
let elem = document.createElement("div");
elem.innerHTML = "你好webpack5.0"
export default elem;

在 webpack.config.js中配置

module.exports = {
    // webpack 概念入口，输出，插件，loader
    entry: "./src/index.js", //定义入口文件
    // 模式 产品，开发
    mode: "production", //'可选：开发环境 development  
    // 输出
    output: {
        // 路径，__dirname 当前目录
        path: __dirname + "/dist",
        // 定义文件名
        filename: 'main.js',
    },

    // 优化选项
    optimization: {

    },
    // 模块
    module: {

    },
    plugins: [
        // 在webpack的运行过程中(运行过程（生命周期))做一些额外操作处理模板，清理
    ],
    // 本地服务器配置

    // npm i webpack-dev-server -D  
    // 安装本地服务
    devServer: {
        open: true, //自动打开浏览器
        hot: true, //热更新
        host: "localhost", //本地域名
        port: 8080, //端口号
    }
}

 注意安装：本地服务：npm i webpack-dev-server -D 

使用 npx webpack 命令打包

打包完成后会根据定义的出口输出至定义的文件夹下。生成定义文件名

 打开后：

webpack将两个文件合并成功，打包成功