webpack

一、简介

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

二、Webpack安装

1、全局安装

npm install -g webpack webpack-cli

2、创建js文件用于打包操作

1、创建三个js文件

*在common.js utils.js定义方法

*在mian.js引入common和utils

3、创建webpack配置文件，配置打包信息

webpack.config.js

 entry: './src/main.js', //配置入口文件
     output: {
         path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径 
         filename: 'bundle.js' //输出文件
     }
 }

4、使用命令执行打包操作

webpack #有黄色警告

webpack --mode=development #没有警告

#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

 

 

 最终测试：

创建01.html文件，引入打包之后js文件，使用浏览器查看效果