前提:需要实现的效果:
•能够将散落的模块打包到一起
•能够编译代码中的新特性
•能够支持不同种类的前端资源模块
一、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的方式去,在这个文件中需要导出一个对象,通过所导出对象的属性完成一些对应的配置选项。