（一）webpack 介绍

1. 什么是webpack

webpack是一个开源的js模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照核心的功能和规则组织在一起，最终合并成一个js文件（或者多个），这个过程就叫做模块打包

2. 什么是模块

比如在项目中引入一个npm包，比如封装了一个实现特定功能的js文件，这些都可以称之为模块，一般来说，一个模块负责一个功能

3. 不使用模块化缺点

以前都是把 script 标签一个个引入到 html 文件中，缺点如下：

（1）需要手动维护 js 的加载顺序

（2）如果一个 js 有全局变量，则会造成全局变量污染

（3）每一个 script 标签都需要向服务器请求一次资源，拖慢网页加载速度

使用模块化会解决上述问题

4. 安装webpack

npm install webpack webpack-cli -D

webpack 是核心模块

webpack-cli 是 命令行工具

5. 打包命令

npx webpack --entry=./index.js --output-filename=bundle.js --mode=development

--entry: 入口文件，即要打包的文件

--output-filename: 打包后的文件的名称，这个打包后的文件放在 dist 文件夹下

--mode： 打包模式，有三种情况 development、production、none

如果是 development、production 则，webpack会自动添加一些配置，减少人为工作量

 

6. 使用 npm scripts

如果每改动一次 js 文件，都要运行上面一长串代码进行重新打包，那真是太麻烦了，所以在 package.json scripts 中进行配置，

则以后每改动代码

npm run build

即可~

7. 使用默认目录配置

上面 index.js 是放在根目录下的，所以 --entry=./index.js ，但是一般项目 都会有源码目录和资源输出目录，源码目录一般是 src 资源输出目录是dist，（webpack默认是dist文件夹）

将 index.js 源入口文件放在 src 下，webpack默认的源代码入口就是 src/index.js，所以 --entry 这一项也就不用写了

"scripts": {
  "build": "webpack --output-filename=bundle.js --mode=development"
},

这里也可以用模块添加的指令 webpack 取代 npx webpack

8. 使用配置文件

命令行帮助指令

npx webpack -h

如果我们每添加一个指令，都往 package.json 的 scripts 里面添加，这样越来越多，不好维护，所以我们可以把webpack相关信息放在一个webpack的配置文件里面，项目打包读取webpack的配置文件即可，这个webpack配置文件取名字就为 webpack.config.js

所以 之前的一大长串可以改成一下对象形式

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    filename: './bundle.js'
  },
  mode: 'development'
}

scripts也不需要那么一大长串啦

"scripts": {
  "build": "webpack"
},

打包命令：

npm run build

9. webpack-dev-server

从上面过程可以看出，我们每改一次代码就要重新 npm run build 一次，如果平时做项目开发一下，运行一下，那可真是令人头大了，所以在这种情况下，webpack-dev-server 就出场了，它存在自动编译功能，改代码自动编译打包，浏览器内容自动更新,

下面就是使用方法啦~

1. 安装webpack-dev-server

npm i webpack-dev-server -D

2. package.json  scripts 里面配置 取名为 dev

"scripts": {
   "build": "webpack",
   "dev": "webpack-dev-server"
},

3. webpack.config.js 里面配置 devServer: {}

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist/js',
    filename: './bundle.js'
  },
  mode: 'development',
  devServer: {
    publicPath: './dist',
    open: true // 是否自动打开浏览器
  }
}

webpack-dev-server 与 webpack 的不同之处在于，webpack-dev-server 是在内存中的，所以当我们做项目的时候，并没有发现 打包后的 dist 文件夹，而 webpack 不是在内存中，会生成 dist 文件夹,网页localhost:8000这种~

vue，react这些脚手架基本都是使用webpack-dev-server来实现的，而且webpack-dev-server还支持proxy代理

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist/js',
    filename: './bundle.js'
  },
  mode: 'development',
  devServer: {
    publicPath: './dist',
    open: true, // 是否自动打开浏览器
    // 配置接口代理
    proxy: {
      '/api': 'https://baidu.com'
    },
    // 端口号
    port: 8888
  }
}

还有很对配置项，官网 devServer部分~