从安装开始使用webpack，打包项目

先来讲讲webpack是什么？

本质上，webpack是一个现代javaScript应用程序的 静态模块打包器

当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle

安装和配置

因为安装webpack要用npm，所以安装之前要首先安装node.js

1.项目文件环境

第一步：在项目根目录使用 npm init -y 初始化，会创建一个package.js

2.安装

本地安装
npm install --save-dev webpack
npm install --save-dev webpack-cli

npm i webpack webpack-cli -D   //安装webpack 和webpack的脚手架
//也可以写作 -D，表示是开发依赖（开发阶段需要用到的包，项目上线运行后不需要）

npm install webpack -g //全局安装
npm install webpack --save-dev //项目内安装

3.配置

根目录下新建src目录，作为代码文件目录

src下新建 header.js 和 index.js

分别对它们进行配置

//header.js
var header = document.createElement("div");
header.innerHTML = "你好webpack from header";
export default Element;

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

然后在执行命令 npx webpack

会自动生成一个dist文件夹，其中有个main.js就是打包生成好的js文件

 继续在dist文件夹中创建一个index.html

在其中引入就可以使用打包好的main.js

 

webpack配置

从webpack v4.0.0开始，可以不用引入一个配置文件，然而，webpack仍然还是高度可配置的，在开始前你需要先理解四个核心概念

• 入口
• 输出
• loader
• 插件

根目录下新建webpack.config.js  webpack默认配置文件

module.exports = {
    // 指定文件的入口
    entry:'./src/index.js',
    // 出口
    output:{
        // 定义文件名
        filename:'main.js',
        // 定义文件夹        
        path:__dirname+'/dist'
        // __dirname获取当前目录
        // path.resolve 方法将路径或路径片段的序列解析为绝对路径
    },
    mode:'production' // 产品模式 | development
}

然后配置打包命令

在package.json，在scripts属性中加入以下代码

"scripts":{
    "build":  "webpack", //打包
    "serve":  "webpack",
}

打包：

然后在执行命令 npm run build实现打包

成功的话就会在根目录创建dist目录，并生产一个main.js文件

webpack-dev-server

还可以在使用npm run serve 打包的同时，启动一个服务器

需要安装 webpack-dev-server

 安装完成后去webpack.config.js进行配置

继续去package.json中添加开发环境启动指令

 继续安装html模板插件

npm install html-webpack-plugin

然后在webpack.config中引用

并实例化

这时候npm run serve 就可以启动服务器显示header.js的内容