-- 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中去.