webpack入门简介

一、什么是webpack？

定义：webpack是JS应用程序的静态模块打包器，在处理应用程序时，会递归构建一个依赖关系图（其中包含应用程序需要的每个模块），然后将所有的模块打包成文件。

二、安装

1、首先 确保你安装了node js 

2、磁盘根目录建立文件  cd mypack

3、项目初始化  npm init -y

4、安装webpack脚手架    npm i webpack-cli -D

5、本地安装 

    npm install --save-dev webpack

    npm install --save-dev webpack-cli  

三、准备文件

1、dist 文件生成目录

        -------index.html

        在index.html里面引入main.js

2、index.js  主要入口文件

        -------header.js 需要被index引入的文件

3、在src里面创建一个header.js文件

     var header=document.createElement("div") //创建一个div

     header.innerHTML="你好webpack";

     export {header}  //导出

4、在src里面建立一个index.js文件

     import {header} from './header.js' //导入header.js

     document.body.append(header)

5、黑窗口执行命令  npm webpack index.js     dist/index.html里面查看网页    同时dist目录多出main.js这个打包生成好的文件

四、配置文件

1、在项目根目录建立文件  webpack.config.js

代码如下：

const path=require('path')    //引入node的path路径模块

module.exports={