快速上手webpack

最新推荐文章于 2022-08-23 21:20:35 发布

JAN_LIGHT

最新推荐文章于 2022-08-23 21:20:35 发布

阅读量154

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/JAN_LIGHT/article/details/108566641

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

快速上手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就是上面数组中的索引。
})([])