-- web前端工程依赖管理，构建发布，对接测试流程-webpack
【官网】：https://www.webpackjs.com/guides
应用场景
web前端工程越来越复杂的时候，需要管理依赖，加载，构建与自动化测试。虽然有Grunt、Gulp这类工具，但他们没法做到按需加载。基础资源
nodejs,webpack
使用须知
需要结合工程实际，注意依赖冲突等问题
配置步骤
>webpack的用处.
1：webpack可以处理js间的相互依赖关系
2：webpack能处理js的兼容问题，把高级的浏览器不识别的语法转为低级的能正常识别的语法
>webpack的安装.
注意：全局安装只要电脑不发生问题，就无需多次安装，但是官方不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
>>全局安装(cmd.exe中).
安装nodejs v10.13.0新版的自带npm命令工具.
设置安装目录：npm config set prefix "D:\Scratch_Install\WebPackInstall\webpack"
设置缓存目录：npm config set cache "D:\Scratch_Install\WebPackInstall\Cache"
npm install webpack -g
npm install webpack-cli -g
在环境变量的path中增加:D:\Scratch_Install\WebPackInstall\webpack 这个目录.
------------------------
发现用普通cmd窗口，而不是node命令窗口（一直提示package cli未安装），可以实现：
>>卸载全局安装的webpack.
npm uninstall webpack -g
>>在项目中安装(cmd.exe中).
npm install webpack --save-dev. //安装最新版
npm install webpack@4.26.0 --svae -dev. //安装指定的版本.
npm install webpack -cli --save -dev
<安装指定版本的webpack>
[注1]在项目中安装的webpack，执行命令式对应的用：非全局安装需使用”node_modules/.bin/webpack” 命令(注：不带双引号，会提示”不是内部或外部命令”).
<查看安装的webpack版本>
”node_modules/.bin/webpack” -v
<打包指定文件，并输出到指定位置>
”node_modules/.bin/webpack” src/test2.js -o dist/test_bundle2.js
<如果遇到module not found can’t resolve ‘jquery’>
npm install jquery -s
>webpack-dev-server的安装.
是一个小型node.js express服务器，新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器，启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中.
<安装node.js服务器>
npm install webpack-dev-server -save-dev
<运行node.js服务器>
[注1]npm run webpack-dev-server //这样是失败的.
项目中是本地安装的webpack-dev-server ,所以无法把它当做脚本命令，在powersell终端中直接运行（只有那些安装到全局的命令 -g,才能在终端中正常运行）.
[注2]需要在package.json中scripts节点中配置一个dev: webpack-dev-server，之后 :npm run dev.
[注3]所有包装完后，webpack-dev-server想正常运行，全局安装过了也不行，在本地项目中必须安装webpack.
<基于nodejs服务器进行实时调试>
[注]引用路径需要调整.
>webpack的应用(基于全局webpack,基于项目的需要注意命令格式).
>>生成package.json.
在项目目录下，执行 : npm init
>>关于package.json中的script节点下的内容.
test这种节点实际上运行的时候使用: npm run test 来运行..
>>关于”npm run build”与 “webpack --mode production”.
>>package.json中的模块安装.
首先需要在全局环境下安装模块，之后在项目中安装模块。
例如安装Echarts模块，先执行npm i -g echarts，之后在项目中执行npm i echarts -D即可。
>>package.config.js的处理.
[注1]该文件一般为手工创建.
[注2]Webpack在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件.
<基于package.config.js配置打包>
[注1]命令格式：”node_modules/.bin/webpack” --mode development
[注2]执行过程，由于webpack命令中并没有带目标文件及输出位置等，因此系统会寻找webpack.config.js进行加载配置.
>>一个简单的示例.
步骤1)在项目目录下新建src目录，并增加index.js文件.
步骤2)npm init生成package.json文件.
步骤3)增加生产或开发者模式配置(配置完了可不用webpack，而是用npm来执行).
[注] 配置后，cmd中：webpack --mode development 等效于 npm run dev
步骤4.1)npm run dev打包文件并输出.
[注]输出的main.js就是可以使用的版本，另外如果是正式场景则使用npm run build.
步骤4.2)npm run build 打包文件并输出.
[注]会生成node_modules的缓存文件.
>>htmlWebpackPlugin is not define.
常见问题
-
webpack-dev-server无法正常运行
【解决方案】在本地项目中必须安装webpack..如果还不行，项目本地重新安装webpack -
htmlWebpackPlugin is not define.
【解决方案】 //创建内存中生成页面的插件(自动把打包好的bundle.js追加到页面中) new htmlWebpackPlugin({ template:"./src/index.html",//指定模板页面 filename:"./index.html", //指定生成页面的名称,输出文件【注意：这里的根路径是module.exports.output.path】 title:"create_by_htmlWebpackPlugin" }) -
cannot find module ‘XXXX’.
【解决方案】删除node_modules包，重新安装
快速入门
>>webpack处理css,less等非js文件.
webpack默认只能打包处理JS类型文件，无法处理其他非JS类型的文件，如果要出路非JS类型的文件，我们需要安装第三方loader加载器.
例如css的我们需要安装第三方的加载器：
<安装第三方加载器>
npm install style-loader css-loader -D
<配置模块>
在webpack.config.js中增加：
module:{
//该模块是引入第三方的样式加载器，对样式进行加载管理
rules:[
{test:/\.css$/,use:[‘style-loader‘,‘css-loader‘]}
]
}
<在入口文件main.js中引入样式>
import ‘./css/index.css’
[注]处理非js文件的加载管理过程：
1：发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方loader规则.
2：如果能找到对应的规则，就会调用对应的loader处理这种文件类型
3：在调用loader时候是从后往前调用的
4：当最后一个loader处理完毕，会将处理的结果直接交给webpack进行打包合并，最终输出到bundle.js中去.
