Webpack：Webpack入门
Webpack入门
Webpack是什么
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)
在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle
Webpack做什么
注意：webpack 不会更改代码中除 import 和 export 语句以外的部分。如果你在使用其它 ES2015 特性，请确保你在 webpack 的 loader 系统(后边会介绍)中使用了一个 Babel或者类似功能的转译器(将高版本js语法转为低版本语法)
Webpack的安装【全局与本地】
①安装命令
cnpm i webpack-cli -g //webpack-cli表示webpack命令行工具
cnpm i webpack -g //-g表示安装在全局
或者
cnpm i webpack-cli webpack -g
②检测全局安装是否成功
webpack -v 或 webpack --version //查看版本
本地安装webpack
①创建本地项目目录
可以手动创建也可以用命令行创建，这里我直接在桌面下手动创建一个webpack的文件夹
②创建package.json文件
npm init --yes 或者 npm init -y //y是yes的缩写
③执行安装命令
在本地安装webpack 与 webpack-cli，用于项目使用
cnpm install webpack webpack-cli -D //-D是本地安装
安装完成后的项目目录
Webpack的基本使用
模块化
Gulp的关注点主要在于流程的自动化，而webpack的关注点这主要在于实现模块化开发
ES6模块语法
ES6模块主要有两个功能：export和import
- export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
- import用于在一个模块中加载另一个含有export接口的模块
示例演示
- 先创建两个js文件: m1.js , m2.js ，这两个js文件表示两个模块。
- 然后在创建一个index.js，这个文件引入了m1.js ，m2.js 这两个
模块中的内容（这里就会使用到前面学的es6模块化语法，import,export） - 同时index.js这个js文件也是项目入口文件，webpack会从这个文件中寻找相关依赖模块然后进行打包，生成最终打包后的文件main.js
- 然后在创建一个index.html，这个文件引入了打包后生成的main.js文件，从而可以直接使用m1.js,m2.js两个模块中的内容
创建基本目录 - Src ：放置模块文件目录Component与入口js文件m1.js,m2.js
Component: 放置所有的模块js - Dist ：放置index.html和 打包后生成的main.js文件
模块一：src/component/m1.js代码
function m1() {
console.info("我是模块一：m1.js");
}
export { m1 }; //将m1模块导出
模块二：src/component/m2.js代码
function m2() {
console.info("我是模块二：m2.js");
}
export { m2 }; //将m2模块导出
入口文件：src/index.js代码
import {m1} from "./component/m1.js";
import {m2} from "./component/m2.js";
m1();//执行m1模块中的内容
m2();//执行m2模块中的内容
网页文件：dist/index.html代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack test</title>
<!-- 直接引入打包后生成的文件 -->
<script src="main.js"></script>
</head>
<body>
<div>webpack test</div>
</body>
</html>
开始打包
直接打开vscode的终端，在项目的根目录下执行webpack就可以让webpack通过index.js入口文件进入项目中把m1.js , m2.js打包为main.js文件让index.html引入
运行dist下的inde.html网页文件，观察结果，成功的运行
关于警告
WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
这个警告的含义是说让你必须设置一个打包模式：开发 或 生产
开发模式 或 生产模式
我们使用webpack，通常需要定义两个配置文件，一个用于development环境，一个用于production环境
这里我们在打包时指定下打包模式即可，如下：
webpack --mode development //表示打包为开发模式
webpack --mode production //表示打包为生产模式（即最终发布的模式），默认模式
一般而言，生产模式下只打包必须要的东西，不会考虑声明开发调试的友好性，打包出来的代码不会压缩，打包出来的东西一般比较小。而开发模式打包出来的东西就比较大了
打包为开发模式
打包为生产模式
把打包命令写入package.json中
在package.json添加如下命令：
"dev":"webpack --mode development",
"pro":"webpack --mode production",
打包演示–开发模式打包
命令：
npm run dev
打包演示–生产模式打包
命令：
npm run pro
关于webpack4零配置
使用babel时需要.babelrc配置文件
使用gulp时也需要gulpfile.js配置文件
那么现在使用webpack是否也需要一个配置文件呢？上面我们并没有使用配置文件也打包成功了
实际上这是webpack4新出的特性，在webpack4以前是需要配置文件 webpack.config.js 的，配置文件用于配置打包相关的各种信息
而在webpack4时，在简单项目下允许你不使用配置文件，即零配置也能打包成功
这个零配置指的是：
- 在webpack4中它会默认定义./src/index.js为入口文件。
- 在webpack4中它会默认定义一个输出文件main.js到dist中。
- 这相当于是他默认给我们创建了一个配置文件，其中指定了打包的入口文件和出口文件信息，然后只要我们按照这个目录结构构建我们的项目，那么在我们没有用到webpack的复杂功能时，我们就可以不使用配置文件，也能打包成功
当然，如果你没有用配置文件，目录结构又不是这样写的，那么自然打包就会失败，如下我就把入口文件index.js改为了index1.js，然后就打包失败了
配置文件
在目录下创建配置文件webpack.config.js
配置文件基本内容如下
const path = require('path');
module.exports = {
entry: './src/index.js', //表示入口文件，即从index.js进入我们的项目
output: { //表示输入文件相关信息
path: path.resolve(__dirname, 'dist'), //输出到当前目录下的dist文件夹，如果不存在就会自动创建一个
filename: 'main.js' // 表示打包后生成的最终js文件
}
};
我们把entry改为index1.js，然后把项目中的index.js也改为index1.js也可以打包成功了
注：这里我用的webpack4，3的版本打包不一样的，可以在网上搜一下
上一篇： C++inline函数
下一篇： 26.商品模块