如何使用webpack实现模块化打包？

前提：需要实现的效果：

•能够将散落的模块打包到一起

•能够编译代码中的新特性

•能够支持不同种类的前端资源模块

一、webpack的作用如下：

1.Webpack 作为一个模块打包工具，本身就可以实现模块化代码打包的问题

通过Webpack 可以将零散的JavaScript 代码打包到一个 JS 文件中

2.对于有环境兼容问题的代码

Webpack 可以在打包过程中通过 Loader 机制对其实现编译转换，然后再进行打包

3.对于不同类型的前端模块，Webpack 支持在Javascript 中以模块化的方式载入任意类型的资源文件

例如可以通过 webpack 实现在Javascript 中加载CSS 文件

被加载的 CSS 文件将会通过 style 标签的方式工作

4.还具备代码拆分的能力

能够将应用中所有的模块按需分块打包，

不用担心全部代码打包到一起，产生单个文件过大，导致加载慢的问题，比如只加载首次需要的文件，等到需要调用的时机再分块加载，叫做分量加载。

非常适合现代化的大型 web 应用，可以对前端所有资源进行模块化

二、使用步骤如下

1.先安装库

$ npm init -- yes

$ npm i webpack webpack-cli --save-dev

webpack 是 Webpack 的核心模块

webpack-cli 是Webpack 的 CLI 程序

用来在命令行中调用 Webpack

2.然后运行打包命令

$ npm webpack

 然后webpack会默认从src/index.js文件开始打包，根据我们项目导入的模块操作进行打包，打包完成后，我们项目目录就会多个dist目录，

3.Webpack4 以后的版本支持零配置的方式直接启动打包

整个过程会按照约定将src/index.js 作为打包入口

最終打包的结果会存放到 dist/main.js中，很多时候默认配置并不能完全满足我们的需求，这就需要我们自己配置一个文件，在根目录创建webpack.config.js,按照common.js的方式去，在这个文件中需要导出一个对象，通过所导出对象的属性完成一些对应的配置选项。