初识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、arrayoutput: { // 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官网的指南顺着走一遍

配置文件：

entry：入口文件（你要打包，就告诉我打包哪些）

output：出口文件（我打包完了，给你放到哪里）

module：模块（放lorder，编译浏览器不认识的东西）

plugins：插件（辅助开发，提高开发效率）

devServer：服务器（webpack提供的本地服务器）

mode：模式，分为开发模式、生产模式。此为4.X里新增的

语法解释：

entry 入口文件

只打包一个文件（单入口），写个字符串

把多个文件打包成一个文件，写个数组

把多个文件分别打包成多个文件，写成对象

webpack把打包后的文件叫Chunck

output 出口文件
filename 输出文件的名称

输出一个文件，写个字符串

输出多个文件，文件名前面加个标识符（id/name/hash）

path 输出文件的路径
路径必需为绝对路径

__dirname是nodejs里的一个模块，表示当前文件的绝对路径

path为nodejs的系统模块，直接引入后调用path.resolve(__dirname,‘输出文件的路径’);

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