开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术—webpack 打包 js 文件（1）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11325
前端技术—webpack 打包 js 文件（1）
内容简介
一．安装 webpack 工具
二．创建 js 文件用于打包操作
三．JS 打包
四．使用命令执行打包操作
一、安装 webpack 工具
1.全局安装
首先是全局安装，安装 npm install-g webpack-cli 工具，在这一部分中包含着两个工具，一个是 webpack ,一个是 webpack-cli,cli 就是客户端。
新建一个文件夹，命名为 webpackdemo，这时，准备工作就已经完成。在终端打开后，对上述命令进行执行，回车之后，两个插件将会被联网下载。
2.安装后查看版本号
执行一个新命令 webpack-V，回车之后就会显示出当前 web pack的版本号，当看到版本号后，就证明这个文件已经被安装成功。
二、创建 js 文件用于打包操作
1.在 web pack demo 下新建一个文件夹起名为 SRC，在 SRC 下新创建 JS 文件，第一个文件起名为 common.js。common.js 下的内容为：
（1）exports.info=function(str){
（2）Document.write(str);
（3）{
第二行代码与传统代码的区别是它将会在浏览器中输出。
2.新建 utils.js,内容为
(1)exports.add=function(a,b){
(2) return a + b;
(3) }
创建第三个文件时需要将上面两根文件引进来。
3.src 下创建 main.js
（1）const common = require (‘./common’);
（2）Const utils = require(‘./utils’);此时上面两个文件已经引进来了。
（3）Common.info(‘Hello world!’+utils.add(100,200));此时是对以上两个文件的添加调用，并对浏览器进行输出。
三．JS 打包
1.webpack 目录下创建配置文件 webpack.config.js
以下配置的意思是:读取当前项目目录下 src 文件夹中的 main.js (入口文件)内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的 dist 文件夹下:打包后的 js 文件名为 bundle.js，其内容为：
const path = require(“path”);//Node.js内置模块
Moudle.exports = {
Entry:’./src/main.js’,//配置入口文件
Output:{
Path:path.resolve(_dirname,’./dist’),//输出路径，dirname;当前文件所在路径
Filename: ‘bundle.js’//输出文件
}
}
entry 的意思就是程序打包的入口，output代表文件打包后输出的路径，budle.js代表打包后的文件。
四．使用命令执行打包操作
Webpack#有黄色警告
Webpack--mode=development#没有警告
注：webpack 是一个打包文件，他可以将多个文件打包为一个文件。
