轻松上手 webpack「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。正文一、什么

正文

一、什么是webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

二、为什么要使用webpack

今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

具体可以看这篇文章，原生js中使用esmodule模块的语法时会出现很多问题，这时候就可以使用打包工具将js打包后使用，

举个例子：

import PostMate from "Postmate";

当在js中使用import引入一个插件的时候，原生js是不支持的，会报错无法在模块外部使用导入语句
所以这时候我们就需要webpack将js进行打包成一个模块
当你使用原生js时经常会遇到这样的问题，这时候打包工具的使用就很重要了

三、webpack的具体使用

3.1 安装

npm install --save-dev webpack

安装完会创建node_module文件夹，就是存放模块的文件夹

3.2 配置文件

在文件夹下创建一个webpack.config.js的文件然后打开进行一些配置

const path = require('path');
//主要配置
module.exports = {
    mode: 'development',
    entry: './src/parent.js',   // 文件入口
    output: {                   // 打包出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

最简单的配置就是写好入口和出口就可以使用了，

entry 就是你需要在html引入的js文件的路径
output path 就是打包后生成的js文件的存放位置
output filename 就是打包后生成的js文件名非常的简单让我们来看看一个项目例子

上面的配置就是相对于这个格式的配置，入口文件是src下的parent.js，出口文件就在parent文件夹下新建一个dist文件夹里面放着bundle.js
以上就是一个webpack基本的配置

3.3 配置命令

配置完webpack当然需要配置一个命令来运行他，不然他也不可能无缘无故的运行首先创建一个package.json文件

npm init -yes

打开默认package.json文件

{
  "name": "test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在script下面，按照格式添加命令，就可以运行了。格式“命令名”：“命令”
举个例子："webpack":"webpack"

"scripts": {
    "webpack":"webpack"
    "test": "echo \"Error: no test specified\" && exit 1"
  },

这样就可以使用命令行执行webpack打包了/ 当然你配置的入口文件得存在，不然肯定是没法打包的

npm run webpack

没有报错就说明成功了，在文件夹下会新建一个dist文件夹，就说明打包成功了

这样就可以在html中直接引入打包好的js，而不是打包前的js了

<script src="../dist/bundle.js"></script>   //打包后的js文件
<!-- <script src="./parent.js"></script> -->     //打包前的js文件

这样项目就可以自由的使用import等语法了

PS：

总结

webpack的基础使用已经介绍完了，相信看一遍其实就能清楚该如何使用webpack了吧，想要深入了解可以查看文档
当你修改js文件时，都需要进行一次打包，这样打包后的js才会改变，毕竟html中引入的是打包后的js文件，这样项目遇到的问题就解决了吧，

轻松上手 webpack

正文