webpack基础学习

随着前端技术的高速发展，现代前端的开发面临着各种各样的问题，从而催生了webpack的出现和发展。本文从一个小demo出发，学习webpack的基础使用及配置。

首先，创建文件夹，webpackDemo；然后，在该目录下，创建对应的文件及目录，结构及文件内容如下：

目录结构：

index.html：

index.js：

math.js：

在浏览器中打开index.html文件，发现报如下错误：

 这是因为浏览器默认不支持模块化，也就不能使用import来导入文件，但是我们可以通过在script标签上加type="module"，来支持模块化。

修改后刷新浏览器，发现报如下错误

修改如下，刷新浏览器成功打印出结果

 

但是如果我们不用ES Module，换成commonjs导入文件，那么浏览器是否会支持呢，在js目录下创建format.js文件 

index.js中引用该文件

刷新浏览器，报错如下：

所以为了彻底解决模块化问题，我们需要借助webpack打包工具，在demo的根目录下安装webpack、webpack-cli，npm i webpack webpack-cli -D。新增文件如下：

我们可以看到在node_modules/。bin目录下，有webpack文件

在终端执行node_modules/.bin/webpack，目录中会生成dist目录及main.js文件

在index.html文件中引入打包后的文件即可完美解决，浏览器不支持模块化的问题。

上面的打包命令太长了，我们可以在package.json文件中配置打包命令，然后执行npm run build即可打包文件。