NodeJs使⽤webpack打包项⽬的⽅法详解⽬录
Webpack
WebPack的使⽤
第⼀步：初始化项⽬:npminit-y
第⼆步：新建 src/index.html
第三步：安装模块Jquery npminstalljquery
第四步：测试隔⾏换⾊
第五步：安装webpack(两个包)npminstallwebpackwebpack-cli-D(开发模式)
第六步：新建fig.js
第七步：修改package.json(可有可⽆，运⾏⽅式不同)
第⼋步：执⾏打包npmrundev
WebPack打包CSS
第⼀步：安装处理css的loader:npmistyle-loadercss-loader-D
第⼆步：修改fig.js:
第三步：引⼊CSS⽂件:`
第四步：运⾏测试:npmrundev
WebPack⾃动打包
webpack打包流程 面试
总结
Webpack
为何要⽤:：友好⽀持模块化、代码混淆、处理js兼容、性能优化等…
WebPack的使⽤
第⼀步：初始化项⽬:npm init -y
第⼆步：新建 src/index.html
第三步：安装模块Jquery npm install jquery
第四步：测试隔⾏换⾊
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隔⾏换⾊</title>
<script src="./index.js"></script>
</head>
<body>
<h1>web pack测试</h1>
<!-- vscode快捷⽅式:ul>li{第$个li}*10 -->
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
<li>第6个li</li>
<li>第7个li</li>
<li>第8个li</li>
<li>第9个li</li>
<li>第10个li</li>
</ul>
</body>
</html>
index.js
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','green');//odd偶数
$('li:even').css('backgroundColor','pink');//even奇数
})
运⾏报错:
这就是兼容性问题
第五步：安装webpack(两个包)npm install webpack webpack-cli -D (开发模式)第六步：新建fig.js
/**
* webpack  配置⽂件
*/
//调试时使⽤development开发模式
//打包时使⽤production⽣产模式
mode : 'development'
}
配置⽂件部分属性:
默认打包⼊⼝:/src/index.js
默认打包出⼝:/dist/main.js
可进⾏配置:
/**
* webpack  配置⽂件
*/
const path=require('path');
//调试时使⽤development开发模式
//打包时使⽤production⽣产模式
mode : 'development',
entry:  path.join(__dirname,'./src/index.js'),  //__dirname表⽰当前⽬录当前路径
output: {
path: path.join(__dirname,'./dist'),
filename:'bundle.js',
},//出⼝
}
第七步：修改package.json(可有可⽆，运⾏⽅式不同)
package.json
"scripts": {
"dev":  "webpack"
},
第⼋步：执⾏打包npm run dev
⽬录下多出⽂件夹dist，终端含有’successfully’表⽰打包成功!
测试
⾸先修改index.html引⼊的js包
<!--<script src="./index.js"></script>-->
<script src="../dist/main.js"></script>
运⾏:
表明webpack打包成功有效并且解决了兼容性问题WebPack打包CSS
传统都是⽤link引⽤
第⼀步：安装处理css的loader:npm i style-loader css-loader -D 根据实际需要安装对应的加载器
npm install less-loader -D (less加载器)
npm install sass-loader node-sass -D (sass加载器)
第⼆步：修改fig.js:
/**
* webpack  配置⽂件
*/
const path=require('path');
//调试时使⽤development开发模式
//打包时使⽤production⽣产模式
mode : 'development',
entry:  path.join(__dirname,'./src/index.js'),  //__dirname表⽰当前⽬录当前路径    output: {
path: path.join(__dirname,'./dist'),
filename:'bundle.js',
},//出⼝
devServer:{
static: './src'
},
/
/新增内容css
module:{    //处理css
rules:[ //(规范)约束
{test:/\.css$/,use:['style-loader','css-loader']}//正则表达式拓展名.css
]
}
}
第三步：引⼊CSS⽂件:`
css
#box{
width: 200px;
height: 100px;
background-color: greenyellow;
}
index.js中加在上⽅(css的路径要填写正确)import './css/style.css' index.html
<h1>CSS</h1>
<div id="box">盒⼦</div>
第四步：运⾏测试:npm run dev
成功
WebPack⾃动打包
由于每次更新代码都需要⼿动打包，这时我们要⽤上⾃动打包
①安装npm install webpack-dev-server -D
②修改package.json(使得窗⼝⾃动打开并且⾃动打包)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9090"
},
③修改fig.js
devServer:{
static: './src'
}
④html引⼊bundle.js
打包后的⽂件都在根⽬录下
<script src="/bundle.js"></script>
④运⾏验证npm run dev原理：服务器上运⾏监听，所以需要访问服务器
直接访问即可，成功实现WebPack⾃动打包
总结
本篇⽂章就到这⾥了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。