先来讲讲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的内容