一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
文章目录
- 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
- 1. 先回忆webpack是个啥
- 2. webpack四大核心
- 2.1 Entry(入口)
- 2.2 Output(输出)
- 2.3 Loader(加载器)
- 2.4 Plugin(插件)
- 3. 按部就班实现webpack
- 3.1 初始化项目
- 3.2 完成项目骨架搭建
- 3.3 实现webpack构建
一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
1. 先回忆webpack是个啥
- 直接看这篇文章
- 一文大白话讲清楚啥是个webpack
2. webpack四大核心
2.1 Entry(入口)
- 我们知道webpack需要根据一个或者多个入口文件来分析和构建模块依赖关系树，然后通过入口配置找出所有的依赖模块进行打包
- 我们可以配置一个入口，也可以配置多个入口
2.2 Output(输出)
- Webpack根据依赖关系将模块打包好，形成一个或者多个打包文件。我们就是通过Output来配置输出的文件路径、文件名称和格式等
2.3 Loader(加载器)
- 我们上面的文章 讲过，Webpack本身只能处理js模块，如果要处理其他类型的文件模块，比如VUE文件，IMAGE文件等，就需要Loader加载器
- 通过配置不同的Loader我们几乎可以将任何类型的文件当成模块进行打包，Loader的主要作用就是在模块加载时对其进行转换和处理。
2.4 Plugin(插件)
- 插件应该很好理解，Webpack可以通过Plugin配置不同的插件来扩展自身的功能，我们一般在webpack中引入并实例化plugin，然后加入pluginA数组中
3. 按部就班实现webpack
3.1 初始化项目
-
我们新建一个webpackTest文件夹（在此之前需要配置Node环境和npm等，这个这里不详细讲，默认node环境已OK），然后用vscode或者webstorm打开，也可以用其他开发工具，只要便于使用终端命令就行
-
我们这里使用vscode来做演示
-
我们先来初始化项目，输入npm init
-
初始完毕后安装输入npm install webpack webpack-cli来webpack和webpack-cli
-
初始化完毕后，我们看一下目前的项目结构分为三部分，node_modules模块目录、package.json和package-lock.json三个文件
-
现在项目初始化完成了，开始我们的业务编码
3.2 完成项目骨架搭建
-
我们在根目录下新建一个src目录，用来存放我们的源代码，并在src目录下创建一个main.js作为Entry的入口文件。
-
然后在根目录下创建一个public，用来存放我们的index.html文件
-
然后我们在src目录下再创建一个modulejs文件夹，用来存放我们的js模块，并在modulejs下面创建add.js
-
我们先来写index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<title>webpackTest</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- 然后写add.js
let add= (x,y)=>x+y;
export {add}
- 然后写main.js，里面引入add.js，两个形成依赖关系
import {add} from './modulejs/add'
console.log(add(2,3))
- 写好index.html,main.js，add.js之后，我们开始配置webpack四大核心，Entry，Output,loader和Plugin
- 由于我们目前只处理js文件，所以webpack自身就可以处理，暂且不配置loader和plugin
- 在根目录下新建webpack.config.js
const path=require('path')
module.exports={
mode:'development',//开发模式
entry:{//配置入口文件，根据入口文件建立依赖关系
main:'./src/main.js'
},
output:{//配置出口文件，制定打包后的文件名称和路径
path:path.resolve(__dirname,'dist'),//__dirname是node模块级别的全局对象，返回当前文件所在的路径，不包含文件名
filename:'js/chunk-[contenthash].js'//[contenthash]表示由内容生成的唯一的hash
},
}
- 这时候我们已经完成项目的基本大家，需要通过webpack跑起来，为了方便，我们在package.json中配置webpack构建命令build:webpack
3.3 实现webpack构建
- 然后我们在终端输入
npm run build
-
运行完以后，我们会发现项目根目录下多了一个dist文件夹，里面生成了一个js文件，这个就是最终打包好的js
-
js生成了，但问题是没有index.html，我们没法去运行，所以我们要把index.html打包，并和打包后的js形成引用关系
-
这时候Plugin就该上场了
-
先安装html插件
npm install html-webpack-plugin
- 我们在package.json里面引入HTML插件，并制定index.html为模板
/**/
const HtmlPlugin=require("html-webpack-plugin")
/**/
plugins:[//因为可以有很多plugin，所以是plugins数组
new HtmlPlugin({
template:'./public/index.html',//指定main.js被关联的模板文件
filename:'index.html',//打包以后得名称
inject:'body'//inject决定main.js被注入到index.html的什么位置，这里选择的事body中'body'和true都表示注入到body标签的底部
})
]
-
下图template误写成tepalte了，请复制上面的代码就行
-
然后我们重新在终端输入
npm run build
-
打包后我们重新打开dist文件夹，会发先里面活了一个index.html.而且打包后的js文件被注入到了html文件body标签的底部
-
这时候我们运行dist下面的index.html，然后打开控制台，看看main.js里面的console是否执行了打印
- 到这里我们初步完成了webpack的整体构建