Webpack
概念？
webpack 是一个模块打包工具。webpack是基于配置的，通过配置一些选项来让webpack执行打包任务
四个核心概念：
入口(entry)
输出(output)
loader
插件(plugins)
用处？
打包：将多个js文件打包成一个文件 （1.减少Http请求 2.压缩页面的空格从而减轻服务器压力）
转换：把扩展的语法转换成普通js , 目的就是让浏览器正常解析运行代码（es6解析）
优化：复杂的开发流程 、进行模块化打包、去空格、压缩混淆、减少http请求等
gulp
基于流的前端自动化构建工具，基于流的任务式的工具
gulp和webpack的区别？
相同点：都是前端自动化的构建工具
不同点：
gulp强调工作流程（对于模块化并没有进行强调）
webpack是前端模块化开发的解决方案 强调模块化、压缩合并、预处理等只不过是它的附带功能
gulp强调工作流程，通过task方法设置一个个的任务（例如文件压缩、合并、启动server等）
**但是它没法解决的是 js module 的问题，是你写代码时候如何组织代码结构的问题.**
webpack是一个前端模块化方案，侧重模块打包，
我们可以把开发中所有的资源（图片、js文件、css资源）通过loader(加载器)和plugins(插件)对资源进行打包处理，
让其生成符合生产环境部署的前端资源。
安装与使用
先黑窗口全局安装：
有可能安装不成功，就用管理员身份进行安装
npm install webpack -g
再继续全局安装： 有可能会出现一坨不认识的选Y 安装webpack-cli
npm install webpack-cli -g
项目文件夹内安装
初始化
yarn init
安装webpack和webpack脚手架
yarn add webpack webpack-cli
查看版本
npm view webpack versions
yarn add webpack@版本号（推荐4版本）
安装完毕运行webpack会报一个错误，因为找不到src文件夹内的文件
需要在跟目录建一个src文件夹，里面建一个index.js（默认文件）
根目录创建配置文件：
webpack.config.js配置
const path = require('path') //引入元素模块
const HtmlWebpackPlugin = require('html-webpack-plugin') //先需要安装模块yarn add --dev html-webpack-plugin，再引入
module.exports = {
// entry:'./src/one.js', //入口文件的路径，引入单文件
// entry:["./src/one.js","./src/two.js"], //多入口，单出口
entry:{ //规定了webpack的入口文件
one:"./src/one.js",
two:"./src/two.js"
},
output:{ //规定了webpack的出口文件
// path:path.join(__dirname,'dist'), //与该文件同级的当前目录，找到当前文件夹
// path:path.join(__dirname,'../dist'), //若将改文件放在了别的目录内，就会使打包后的把文件也与此同级，所以给打包的文件指定一个路径
path:path.join(process.cwd(),"dist"), //与上面的效果一样，代表的意思是在node进程的目录（当前执行node命令时候的文件夹地址）
// filename:'one.js' //重新命名的文件名,单出口
// filename:'[name].[hash:6].js' //多出口,（可加后缀并限制长度），当文件没更改的时候是不会重新生成文件的
filename:'[name].[chunkhash:6].js' //更改单个文件内容后会指定将更改的文件进行重新打包（默认所有重新打包）
},
plugins:[ //直接在打包好的文件中生成一个index.html文件，并自动将其他的文件引入到该html中
new HtmlWebpackPlugin({
title:"webpack！", //在html文件中设置<title><%= htmlWebpackPlugin.options.title %></title>，可以将标题名字传入给html
template:"./public/index.html" //可以指定该html模板为打包好的html文件，并可以将其他的js文件自动引入进去，路径从根目录开始
})
],
devServer:{ //内部集成了 http-proxy-middlerware
open:true, //默认自动打开浏览器
port:8000 //默认知名8000端口
//proxy:{} //前端正向代理 后续项目上线打包nginx的反向代理
}
}
package内部可配置命令
如有报错有可能是版本问题
当webpack版本为4时，webpack-cli版本应将为3
"scripts": { //里面写的是命令，可以直接用yarn build,yarn start
"build": "webpack --mode production --config webpack.config.js",
//--mode指定production为生产模式，压缩版 --config指明配置文件
"start": "webpack-dev-server --mode development --config webpack.config.js"
//需要先安装文件yarn **add webpack-dev-server（内容改变，视图会自动刷新，热部署功能）** -D development为开发模式，未压缩版
}
