NodeJs使用webpack打包项目的方法详解

Roselani ·
更新时间:2024-11-10
· 233 次阅读

目录

Webpack

WebPack的使用

第一步:初始化项目:npm init -y

第二步:新建 src/index.html

第三步:安装模块Jquery npm install jquery

第四步:测试隔行换色

第五步:安装webpack(两个包)npm install webpack webpack-cli -D (开发模式)

第六步:新建webpack.config.js

第七步:修改package.json(可有可无,运行方式不同)

第八步:执行打包npm run dev

WebPack打包CSS

第一步:安装处理css的loader:npm i style-loader css-loader -D

第二步:修改webpack.config.js:

第三步:引入CSS文件:`

第四步:运行测试:npm run dev

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打包解决问题官网:https://www.webpackjs.com/

第五步:安装webpack(两个包)npm install webpack webpack-cli -D (开发模式) 第六步:新建webpack.config.js /** * webpack 配置文件 */ module.exports={ //调试时使用development开发模式 //打包时使用production生产模式 mode : 'development' }

配置文件部分属性:

默认打包入口:/src/index.js

默认打包出口:/dist/main.js

可进行配置:

/** * webpack 配置文件 */ const path=require('path'); module.exports={ //调试时使用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加载器)

第二步:修改webpack.config.js: /** * webpack 配置文件 */ const path=require('path'); module.exports={ //调试时使用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" },

③修改webpack.config.js

devServer:{ static: './src' }

④html引入bundle.js

打包后的文件都在根目录下

<script src="/bundle.js"></script>

④运行验证npm run dev原理:服务器上运行监听,所以需要访问服务器

直接访问即可,成功实现WebPack自动打包

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注软件开发网的更多内容! 



webpack 方法

需要 登录 后方可回复, 如果你还没有账号请 注册新账号
相关文章