从零开始 创建一个webpack实例

webpack概念

---

webpack 是现代JavaScript应用程序的静态模块打包器(module bundler)

当webpack工作时，它会递归构建一个项目的依赖关系图，其中包含了每个应用程序需要的模块，然后将所有模块打包成一个或者多个bundle

安装

---

确定你已经安装了nodejs
Nodjs官网安装地址:http://nodejs.cn/
安装好后可以在可以在cmd窗口中查看

首先 创建一个文件并且进入文件

npm初始化文件 (建立package文件)

npm init -y

然后在当前目录下使用npm命令安装webpack 和webpack-cli
(安装到开发环境下)

npm i webpack webpack-cli -D

使用vscode或者其他工具 进入目录
这是安装好后的目录结构
接下来在目录中准备文件

创建mypack目录下的src目录，然后在src目录中创建对应的项目文件，以便后续的打包实验
（老实说 仿照vue目录结构就ok了）
具体目录结构如下：

然后在header.js中写入以下代码

// 创建一个节点
var elem = document.createElement('div');
// 设置内容
elem.innerHTML = '你好webpack';
// 导出节点
export default elem;

再去index.js文件中写入以下代码

// 导入header.js 的中的节点
import elem from './header.js';
// 将节点插入到页面
document.body.appendChild(elem);

两个文件代码写完以后，就可以试着去执行打包命令了
在cmd终端窗口中 执行npx webpack

npx webpack

执行命令后 就会发现 左边多出来一个dist目录，这个就是你打包后的文件，webpack会将index.js文件和header.js文件整合在一起生成main.js文件放在dist目录中，其中，webpack会压缩优化文件体积，
以下是打包后的main.js的内容

格式化一下main.js里的内容 （当然，这里只是为了演示，自己项目中千万别这么做，不然白压缩了）

能看到，整体是一个闭包函数，webpack将遍历名全部进行了简写(elem—>e)，以此来尽可能的优化体积。

(() => { // 闭包
    "use strict"; // 严格模式
    var e = document.createElement("div"); // header.js中的elem
    e.innerHTML = "你好webpack";
    const n = e; // 相当于index.js中的import elem from './header.js';导入操作
    document.body.appendChild(n)
})();

接下来 在dist目录下创建一个html文件：index.html

然后在index.html中引入main.js

引好后 就可以运行网页查看效果了

---

虽然运行出来了 但是可以发现 在运行npx webpack时，终端会有一个报错，这个问题怎么解决呢，接下来说说配置文件的问题

---

配置文件 webpack.config.js

在webpack.config.js中你可以配置webpack的各种设置，以达到最好用的状态。

在mypack目录中 创建一个名为webpack.config.js的JavaScript文件。并在其中写入以下代码

module.exports = {
    // entry 入口路径
    entry: './src/index.js',
    // output 出口
    output: {
        // 出口文件名
        filename: 'main.js',
        // 出口位置
        // __dirname: nodjs中代表当前目录(也就是mypack目录)
        path: __dirname + '/dist'
    },
    // 模式
    // production 产品模式
    // development 开发模式
    // 产品模式下打包后程序的体积要比开发模式的体积远远小得多
    mode: 'production',
}

这样再运行npx webpack就不会有报错了

配置文件建都建了，那肯定不能只写这么点配置。
接下来 先试试不同的打包姿势。
在package.json文件中在scripts处添入以下代码

这样，你就可以使用以下两种方式进行打包了

npm run serve // 第一种
npm run build // 第二种

npm run serve这条命令在vue中能够启动服务器将项目跑起来，这样同样也可以，只不过需要亿点点的修改。
首先安装插件： webpack-dev-server

npm i webpack-dev-serve -D

安装好后，在webpack.config.js文件中配置这个服务器

devServer: {
        // 自动打开浏览器
        open: true,
        // 本地域名
        host: "localhost",
        // 配置地址端口号
        port: "8080",
        // 开启热更新
        hot: true,
    }

然后在package.json文件中配置

"scripts": {
    "build":"webpack",
    "serve": "webpack serve", // 在serve中添加 serve
    "test": "echo \"Error: no test specified\" && exit 1"
  },

到这里以为就完成了？不不不，远远不够，我们还需要一个模板文件，vue项目中有一个public目录，这个很不错，拿过来，然后在public中建立一个index.html文件，像这样：

文件里写一个页面基本结构就行。
然后安装下一个插件：html-webpack-plugin

npm i html-webpack-plugin -D

这个插件主要用来做模板
然后在webpack.config.js中添加以下配置

// 导入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
  plugins: [
        // 实例化
        new HtmlWebpackPlugin({
            // 模板文件名
            filename: 'index.html',
            // 指定模板文件
            template: './public/index.html',
        })
    ],
}

整体配置文件

好了 现在试试运行 npm run serve 命令吧

就此 搞定。
当然 webpack的配置肯定不只是这些，还有各种优化处理，比如css文件的压缩优化，图片的压缩优化等等等等，但由于篇幅，接下来的自行探索吧~
webpack官方文档：https://www.webpackjs.com/concepts/
加油 冲！