快速上手webpack

快速上手webpack

从案例上手webpack

首先目录结构如下

在这里插入图片描述

//heading.js
export default()=>{
    const element = document.createElement('h2')

    element.textContent = 'Hello world'
    element.addEventListener('click',()=>{
        alert('Hello webpack')
    })
    return element
}
//index.js
import createHeading from './heading.js'

const heading = createHeading()

document.body.append(heading)
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Weapack - 快速上手</title>
</head>
<body>
    <script  src="src/index.js"></script>
</body>

</html>

然后执行如下命令

yarn init --yes//执行初始化
//执行初始化后会生成一个package.json文件

yarn add webpack wepack-cli --dev//安装webpack脚手架工具
//安装脚手架工具后会生成node_modules文件夹 脚手架工具就都在这里面了

yarn webpack进行打包//打包后会生成dist文件,进行打包后的main.js会生成在内部

Webapck配置文件

webpack4之后的版本支持零配置进行打包,默认打包入口是’src/index.js’,打包到’dist/mian.js’

很多时候,我们需要自定义打包入口和打包出口,这个时候就要在根目录下新建一个webpack.config.js,在内部进行打包的配置,webpack运行在node环境下。

const path =require('path')
module.exports = {
    entry:'./src/index.js',//入口
    output:{
        filename:'bundle.js',//出口
        path: path.join(__dirname,'output')//输出路径必须要是绝对路径
    }
}

Webpack工作模式

webpack4新增了工作模式

yarn webpack命令是运行在默认模式—production下

为了指定不同的工作模式,可以如下命令。

yarn webpack --mode development

yarn webpack --mode none

yarn webpack --mode production 这是默认工作模式

不同的模式有不同的效果,可去官网详细了解

Webpack打包结果和运行原理

在对整体打包生成的代码进行折叠之后会发现

//这就是折叠之后剩下的唯一一个自执行函数
(function (modules){
    
})([])

//在对数组展开后,会发现其实是两个接受参数完全一样的函数,对应的是源代码中的模块,也就是每一个模块都会包含在数组当中,从而实现模块的私有作用域
(function (modules){ 
})([
    (function(module, __webpack_exports__, __webpack_require__){
    }),
    (function(module, __webpack_exports__, __webpack_require__){ 
    }),
])
//展开工作入口函数后
(function (modules){
    var installedModules = {};//定义对象用于缓存加载过的模块
    function __webpack_require__(moduleId) {}//加载模块
    /*------------------------------------------------*/
    return __webpack_require__(__webpack_require__.s = 0);//最后调用了require函数,传入了0,这个0就是上面数组中的索引。
})([])
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值