前端笔记2 使用 Webpack 打包前端的资源

1. 运行环境

---

• Node.js
• Visual Studio Code

2. Webpack

---

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

3. 使用 Webpack 进行打包

---

项目结构：

|—— dist 存储打包后的 js 文件
|—— src 存储资源文件
      |—— common.js 测试文件1
      |—— utils.js  测试文件2
      |—— main.js	  测试文件3, 该文件会引入 1 和 2
      |—— index.html 用于测试打包后JS文件的效果
      
|—— webpack.config.js 配置 webpack 打包  

3.1 安装 Webpack

第一步，使用 node 的命令全局安装 webpack

npm install --location=global webpack webpack-cli

安装后使用webpack命令查看版本号

webpack -v

3.2 准备JS文件

common.js

exports.info = function(str){
   
    document.write(str) // 浏览器输出
}

utils.js

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

main.js

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

common.info('Hello World!' + utils.add(1, 2)) 

3.3 编写配置文件

webpack 目录下创建配置文件 webpack.config.js

const path = require('path')                        // Node 内置模块

module.exports = {
     
    entry: './src/main.js',