初识webpack打包

初识webpack打包,小白入门

前言:

webpack是一款基于node的构建工具,其中一大特色就是打包

因为现在前端已经工程化开发,写的代码已经不能直接在浏览器上运行了

这时候webpack会帮你把代码进行编译,打包成浏览器识别的js文件

而你需要做的就是配置打包参数,然后引入打包好的js文件运行即可(当然这一步webpack也帮你做好了)

开始创建demo

Tips:接下来我们会创建几个js文件,用webpack打包后使用生成的js文件,使得html正常在浏览器显示

mkdir webpack-demo // 创建webpack-demo文件
cd webpack-demo // 进入webpack-demo文件
npm init -y // 生成package.json文件

执行webpack -v 查看是否已经安装,若无安装则执行下面命令安装:

npm install webpack webpack-cli --save-dev // 安装webpack

现在创建一下目录结构、文件和内容:

在这里插入图片描述

src/show.js代码:

//声明一个函数,最终做为一个模块被导出
const show = content => {
    const box = document.getElementById('box')
    box.innerHTML = `你好${content}`
}

export {show} //ES6导出模块的语法

src/main.js代码:

import { show } from './show' //ES6导入模块的语法,‘./’为main.js的根目录src,ES6里导入的模块为js话不需要加后缀名
show('123123')

index.html代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
  </head>
  <body>
    <div id="box"></div>
      
    <!-- bundle.js是一会打包后生成的文件 -->
    <script src="dist/bundle.js"></script>
  </body>
</html>

config/webpack.config.js代码:

const path = require("path")
module.exports = {
    entry: { // entry入口
        index:'./src/main.js',
    }, // 入口文件 类型:string、object、array
    output: { // output出口
        path:path.resolve(__dirname,'../dist'), // path.resolve为nodejs的固定语法,用于找到当前文件的绝对路径
        filename: "bundle.js" // 输出的文件名
    },
    mode: "development", // 定义打包的环境
    
}

在终端执行命令:

webpack --config config/webpack.config.js

不出意外会出现类似这样的显示:

在这里插入图片描述

此时目录结构多了一个dist文件以及bundle.js文件

在这里插入图片描述

这时候将index.html在浏览器上打开就可以跑通了

此时我们就已经将src下的两个文件打包好了,可以正常的在浏览器上跑了

Tips:每次执行webpack --config config/webpack.config.js太麻烦,所以在package.json中可以配置命令执行,接下来只要执行:npm run build 即可

在这里插入图片描述

到这里,一个webpack打包的demo就结束了

其他webpack配置可以根据webpack官网的指南顺着走一遍

配置文件:
  1. entry:入口文件(你要打包,就告诉我打包哪些)
  2. output:出口文件(我打包完了,给你放到哪里)
  3. module:模块(放lorder,编译浏览器不认识的东西)
  4. plugins:插件(辅助开发,提高开发效率)
  5. devServer:服务器(webpack提供的本地服务器)
  6. mode:模式,分为开发模式、生产模式。此为4.X里新增的
语法解释:
  1. entry 入口文件
    1. 只打包一个文件(单入口),写个字符串
    2. 把多个文件打包成一个文件,写个数组
    3. 把多个文件分别打包成多个文件,写成对象
    4. webpack把打包后的文件叫Chunck
  2. output 出口文件
    1. filename 输出文件的名称
      1. 输出一个文件,写个字符串
      2. 输出多个文件,文件名前面加个标识符(id/name/hash)
    2. path 输出文件的路径
      1. 路径必需为绝对路径
      2. __dirname是nodejs里的一个模块,表示当前文件的绝对路径
      3. path为nodejs的系统模块,直接引入后调用path.resolve(__dirname,‘输出文件的路径’);

此文借鉴这篇文章后方便自己理解编写:https://blog.csdn.net/ikaivon/article/details/81477296?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242.1

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值