2023年7月7日发(作者：)

NodeJs使⽤webpack打包项⽬的⽅法详解⽬录WebpackWebPack的使⽤第⼀步:初始化项⽬:npminit-y第⼆步:新建 src/第三步:安装模块Jquery npminstalljquery第四步:测试隔⾏换⾊第五步:安装webpack(两个包)npminstallwebpackwebpack-cli-D(开发模式)第六步:新建第七步:修改(可有可⽆,运⾏⽅式不同)第⼋步:执⾏打包npmrundevWebPack打包CSS第⼀步:安装处理css的loader:npmistyle-loadercss-loader-D第⼆步:修改:第三步:引⼊CSS⽂件:`第四步:运⾏测试:npmrundevWebPack⾃动打包总结Webpack为何要⽤::友好⽀持模块化、代码混淆、处理js兼容、性能优化等…WebPack的使⽤第⼀步:初始化项⽬:npm init -y第⼆步:新建 src/第三步:安装模块Jquery npm install jquery第四步:测试隔⾏换⾊

web pack测试

• 第1个li
• 第2个li
• 第3个li
• 第4个li
• 第5个li
• 第6个li
• 第7个li
• 第8个li
• 第9个li
• 第10个li

rt $ from 'jquery'$(function(){ $('li:odd').css('backgroundColor','green');//odd偶数 $('li:even').css('backgroundColor','pink');//even奇数})运⾏报错:这就是兼容性问题第五步:安装webpack(两个包)npm install webpack webpack-cli -D (开发模式)第六步:新建/** * webpack 配置⽂件 */s={ //调试时使⽤development开发模式 //打包时使⽤production⽣产模式 mode : 'development'

}配置⽂件部分属性:默认打包⼊⼝:/src/默认打包出⼝:/dist/可进⾏配置:/** * webpack 配置⽂件 */const path=require('path');s={ //调试时使⽤development开发模式 //打包时使⽤production⽣产模式 mode : 'development', entry: (__dirname,'./src/'), //__dirname表⽰当前⽬录当前路径 output: { path: (__dirname,'./dist'), filename:'', },//出⼝}第七步:修改(可有可⽆,运⾏⽅式不同)"scripts": { "dev": "webpack" },第⼋步:执⾏打包npm run dev⽬录下多出⽂件夹dist,终端含有’successfully’表⽰打包成功!测试⾸先修改引⼊的js包