前端-WebPack

• 5.6、浏览

1、什么是Webpack

===========================================================================

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

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

2、Webpack安装

==========================================================================

2.1、全局安装

---

#全局安装webpack

npm install -g webpack webpack-cli

或

npm install -g webpack

npm install -g webpack-cli

2.2、安装后查看版本号

---

webpack -v

3、创建项目

=====================================================================

创建 webpackdemo文件夹

3.1、初始化项目

---

进入目录，执行命令

npm init -y

3.2创建src文件夹

---

3.3 src下创建common.js

---

这里使用的是CommonJS模块化方式，这种方式不支持ES6的语法，所以不需要Babel转码

exports.info = function(str){

document.write(str)

}

3.4 src下创建utils.js

---

exports.add = function(a,b){

return a + b

}

3.5 src下创建main.js

---

const a = require(‘./common’)

const b = require(‘./utils’)

a.info(‘hello world!’+b.add(100,200))

4、JS打包

=====================================================================

4.1、创建配置文件

---

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

以下配置的意思是：

读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包

打包后的文件放入当前目录的dist文件夹下

打包后的js文件名为bundle.js

const path = require(“path”) //Node.js内置模块

module.exports= {

entry: ‘./src/main.js’, //配置入口文件

output: {

path: path.resolve(__dirname, ‘./dist’), //输出路径，__dirname：当前文件所在路径

filename: ‘bundle.js’//输出文件

}

}

4.2、执行编译命令

---

webpack --mode=development

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

也可以配置项目的npm运行命令，修改package.json文件

“scripts”: {

//…,

“dev”: “webpack --mode=development”,

“prod”: “webpack --mode=production”

}

运行npm命令执行打包

npm run dev #开发打包

或

npm run prod #生产打包

4.5、创建入口页面

---