Webpack安装以及快速入门

3 Webpack

1 什么是Webpack

https://webpack.js.org/ (官网)

webpack 是一个现代 javascript 应用程序的 静态模块打包器 (module bundler)

待会要学的 vue-cli 脚手架环境, 集成了 webpack, 所以才能对各类文件进行打包处理

webpack是一个静态模块打包器,可以做以下的这些工作

语法转换(主要是浏览器兼容)
- less/sass转换成css
- ES6转换成ES5
- ...
html/css/js 代码压缩合并 (打包)
webpack可以在开发期间提供一个开发服务器

可以把它看成maven中工程自动化那部分(jar) ,前端项目也是先打包再上线

2 Webpack安装

全局安装

cnpm install webpack@4.41.5 -g
cnpm install webpack-cli@3.3.12 -g

安装后查看版本号

webpack -v
webpack-cli -v

3 快速入门 (js打包)

方式一：webpack原始方式

（1）新建文件夹 work3，在创建src文件夹，创建 bar.js

js 复制代码

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

（2）src下创建logic.js

js 复制代码

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

（3）src下创建main.js

js 复制代码

var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

说明：上述具有多个js文件，那么我们在实际开发中使用的时候会导入过多的js文件，使用起来不方便，那么我们可以将上述多个js文件打包成一个js文件。

（4）创建配置文件webpack.config.js ，该文件与src处于同级目录

js 复制代码

var path = require("path"); // 导入 node.js 中专门操作路径的模块，固定写法
//执行webpack命令的时候会读取到module.exports中的内容
module.exports = {
    //执行webpack命令的时候,读取入口main.js，由于main.js关联bar.js和logic.js，所以会将这三个js文件合并到一个js文件中
	entry: './src/main.js', // 打包入口文件的路径
    //输出文件位置
	output: {
        //__dirname表示当前工程目录
		path: path.resolve(__dirname, './dist'),  // 输出文件的存放路径
		filename: 'bundle.js'  // 输出文件的名称
	}
};

以上代码的意思是：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

webpack 的 4.x 版本中默认约定：

打包的入口文件为 src -> main.js

打包的输出文件为 dist -> index.js

（5）执行编译命令

webpack

执行后查看bundle.js 会发现里面包含了上面两个js文件的内容

（6）创建index.html ,引用bundle.js

html 复制代码

<!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <script src="dist/bundle.js"></script>
  </body>
</html>`

创建完毕,完整目录如下

测试调用index.html，会发现有内容输出：Hello world!300

方式二：基于NPM方式

新建项目空白目录，并运行npm init --y 命令，初始化包管理配置文件package.json

-y 可以直接跳过配置
新建 src 源代码目录,并且把 bar.js 和 logic.js 和 main.js 文件复制到 src目录

创建index.html ,引用bundle.js

html 复制代码

<!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <script src="dist/bundle.js"></script>
  </body>
</html>

运行 npm install webpack webpack-cli 命令，安装webpack相关的包

如果全局安装过webpack 和 webpack-cli工具, 此步骤可跳过

在项目根目录中，创建名为webpack.config.js 的 webpack配置文件同上

js 复制代码

var path = require("path");
module.exports = {
	mode: 'development', // mode 用来指定构建模式development、production
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
};

mode: 'development' //mode 用来指定构建模式、production：生产模式（压缩）

在 package.json 配置文件中的scripts节点下，新增dev脚本如下：
js 复制代码
```
{
  "name": "work4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"  //script 节点下的脚本，可以通过 npm run 执行
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```
完整代码结构：

在终端中运行 npm run dev 命令，启动webpack进行项目打包。

注意是在package.json 包下运行该命令

点击index.html文件查看结果, 会发现有内容输出：`Hello world!300

说明：使用npm命令运行的原因是后期使用webpack命令的时候，命令会很多，不仅仅只有webpack几个字母，不好记，而使用：npm run dev命令执行无论webpack命令有多少都会执行。

4 webpack-dev-server 开发服务器

4.1 介绍

修改main.js代码如下：

需要每次在修改源码之前需要重新打包：

每次修改代码, 都需要重新打包, 才能看到最新的效果, 且实际工作中, 打包非常费时 (30s - 60s) 之间

为什么费时?

构建依赖
读取对应的文件, 才能加载
用对应的 loader 进行处理
将处理完的内容, 写入到 dist 目录

简而言之就是我们希望修改源码完毕之后，不用再每次重新打包，运行的结果直接是修改后的结果。

解决方案：我们可以开启一个开发服务器webpack-dev-server, 在电脑内存中打包 , 缓存一些已经打包过的内容, 只重新打包修改的文件 (热更新)

4.2 使用

如果模块(work3)下，没有package.json 文件，那么需要在模块下初始化命令：npm init即可

修改 package.json -> scripts 中的 dev, dependencies, devDependencies如下：

devDependencies这是开发时依赖, 上线不依赖

js 复制代码

{
  "name": "work4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": { 
    "webpack-dev-server": "^3.11.2"
  }
}

然后运行 cnpm install 指令,安装webpack,webpack-cli 和 webpack-dev-server

修改 webpack.config.js 文件,添加 devServer

json 复制代码

var path = require("path");
module.exports = {
	mode: 'development', // mode 用来指定构建模式development、production
	entry: './src/main.js',
	devServer: {
		port: 8099,// 服务器占用8099端口
		open: true  // 自动打开浏览器
	},
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
};

将 index.html 中，script 脚本的引用路径

html 复制代码

<!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <!-- 内存中读取 -->
    <script src="/bundle.js"></script>
  </body>
</html>

运行 npm run dev 命令
在浏览器中访问 http://localhost:8099地址，查看自动打包效果

webpack-dev-server 会启动一个实时打包的 http 服务器

webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，基于内存