一、webpack基础：
小弟第一次写博客，仅为了记录自己学习中的心得，方便自己以后翻阅。文中的图片我觉得说的很好，是从别的文章中拷贝过来的，忘记进行图片来源网址说明，抱歉。文中表述不准确,不对的的地方，请直接留言评论批评，我会认真修改，感谢！
1、大纲：
A、webpack的定义
B、6个核心概念：
entry：入口文件（你要打包，就告诉我打包哪些，可以是单个入口文件，数组，对象标识）。入口起点指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
output：出口文件（我打包完了，给你放到哪里）。output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。
module：模块（放lorder，编译浏览器不认识的东西）。loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
plugins：插件（辅助开发，提高开发效率）。loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
devServer：服务器（webpack提供的本地服务器）
mode：模式，分为开发模式（development）、生产模式（production），webpack4.x版本新加的。通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化。
C、Vue官网Vue-Cli脚手架的简单使用
2、webpack：webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为 合适 的格式供浏览器使用。webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是一个构建工具。当webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，官网对webpack的定义是MODULE BUNDLER，翻译过来就是：模块打包机。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。请看下图：
推荐学习地址：https://www.cnblogs.com/BetterMan-/p/9867642.html，http://webpack.wuhaolin.cn/，https://segmentfault.com/a/1190000006178770，https://segmentfault.com/a/1190000020403955，https://www.cnblogs.com/ghostwu/p/7499237.html
3、webpack4.x安装（全局安装和局部安装）与卸载命令：（前提：由于webpack是基于node.js，首先去node.js官网安装最新版本）：
A、安装命令：
全局安装：npm install webpack webpack-cli --save-dev -g
局部安装（在需要的文件夹中，cmd执行命令行）：npm install webpack webpack-cli --save-dev 或者 npm install webpack webpack-cli --save-dev -s
B、卸载命令：
全局卸载：npm uninstall webpack webpack-cli -g
局部卸载（在需要的文件夹中，cmd执行命令行）：npm uninstall webpack webpack-cli
C、说明：-g：代表全局安装 ，-s或者不加：代表局部安装，安装完成之后，可以查看版本：webpack -v；--save-dev：在package.json安装到开发环境 devDependencies，--save：在package.json安装到生产环境：dependencies。
4、npm全局安装与局部安装的区别：
A、全局安装：全局安装往往是安装一个工具，他不是安装在一个文件夹下，而是安装在某个全局环境下，如目前我的安装路径是：C:\Users\xhxy\AppData\Roaming\npm，可以看到这里面有webpack，webpack-cli，如下图：
B、局部安装：是在需要的项目中，安装到了 ./node_modules 文件中了，可以看到这里面有webpack，webpack-cli，如下图：
5、webpack 开始之旅：
A、传统方式：
问题：
浏览器在加载时，会先加载html文件，然后根据HTML里面的script标签去依次加载每个js文件。这样对于每个js文件，浏览器都会向服务器发送一次请求。如果引入的文件数很多，那么发送的请求次数就会
过多，对服务器造成一定的压力。而且，单个文件可能并不大，相对于浏览器对每次请求都需要建立链接、断开链接的成本来说很不划算。要解决这个问题，就需要打包，将多个js文件打包成单个。
不同script标签引入的js代码，会污染全局作用域，比如a.js中声明的a就直接挂载到了window上，其他文件中如果再声明a变量，就会有冲突。
B、webpack命令：
- npm init 和 npm init -y（-y可以让你省略去不停的yes）
- npm install webpack webpack-cli --save-dev
- 新建文件夹src，dist，在根目录中新建main.js（作为入口文件）,在src目录中新建a.js，b.js文件。
- 安装loader：
npm install css-loader style-loader --save-dev (样式处理的loader转换)
npm install url-loader file-loader --save-dev（图片、视频等文件的loader转换）
- 安装plugin：
npm install html-webpack-plugin --save-dev（输出模板的插件）
npm install clean-webpack-plugin --save-dev（清理dist文件夹的插件）
npm install extract-text-webpack-plugin@next --save-dev（抽取css样式的插件，防止将样式打包在js中引起页面样式加载错乱的现象）
- 配置本地服务器devserver：
npm install webpack-dev-server --save-dev
C、这是我自己练习时，简单的配置文件：
//引用node.js 的path模块,设置路径
const path=require('path');
//引用HtmlWebpackPlugin插件
const HtmlWebpackPlugin=require('html-webpack-plugin');
//引用清理 /dist 文件夹插件
const { CleanWebpackPlugin }=require('clean-webpack-plugin');
//抽离css样式插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports={
//入口文件
entry:'./main.js',
//出口文件
output:{
//输出文件的路径，默认就是dist路径 注：__dirname表示当前文件所在的目录
path:path.resolve(__dirname,'dist'),
//输出的文件名
filename:'js/bundle.js'
},
//模式 development or production
mode:'development',
//配置如何处理模块
module:{
rules:[
{
//正则匹配以.css结尾的文件
test: /\.css$/,
//需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
// use: [
// 'style-loader',
// 'css-loader'
// ]
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
},
{
test:/\.(jpg|png|gif)$/,
use:[
{
loader:'url-loader',
options:{
//指定输出到dist打包文件夹的目录
outputPath:'img/',
//设置css样式文件中相对于图片文件的目录
publicPath:'../img',
//这样在小于8K的图片将直接以base64的形式内联在代码中，可以减少一次http请求；大于的话，会copy文件到新的文件夹中
limit:8192
}
}
]
}
]
},
//插件
plugins:[
new HtmlWebpackPlugin({
//文件名称，默认存放在dist中
filename:'index.html',
//文件的模板
template:'./public/index.html'
}),
//默认清楚dist文件夹
new CleanWebpackPlugin(),
//从js中抽离css样式到指定dist文件夹中
new ExtractTextPlugin("css/styles.css"),
],
//devServer 服务器
devServer:{
host:'localhost', //服务器的ip地址
port:3000, //端口
open:true //自动打开页面
},
};
D、webpack 构建流程：
6、vue-cli简单使用：
A、全局安装vue-vli 3.x ：npm install @vue/cli -g ,通过命令查看版本： vue -V
B、创建项目： vue create vue-test 项目名称必须是小写：使用这种kebab-case风格