Webpack前端资源打包工具

什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按
照指定的规则生成对应的静态资源。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的
请求。

使用前提

安装node.js

开始使用

1. 创建webpackdemo文件夹，全局安装：

npm install -g webpack webpack-cli

2.安装后查看版本

webpack -v

3.在工程下创建src 文件夹，在src下创建common.js，代码如下：

exports.info=function(str){
    document.write(str);
}

4：在src下创建文件utils.js

exports.add=function(a,b){
    return a+b;
}

5: 可以将以上俩个js文件看成方法类，创建main.js 文件，引入俩个js文件，并进行调用

const common = require('./common.js')
const utils = require('./utils.js')

common.info('hello common'+utils.add(1,3));

在webpackdemo目录下创建配置文件 webpack.config.js，并在webpackdemo目录下创建文件夹dist，打包后的文件将会放在该目录下。

const path = require("path");//Node.js内置模块
module.exports={
    entry: './src/main.js',//配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'),//输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
} 

执行命令：

webpack  		或者
webpack --mode=development

enter执行 出现打包文件：

打包成功