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


Posted in NodeJs onFebruary 28, 2022

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奇数
})

运行报错:

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

这就是兼容性问题

使用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>

运行:

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

表明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

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

成功!!!

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自动打包

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容! 

NodeJs 相关文章推荐
抛弃Nginx使用nodejs做反向代理服务器
Jul 17 NodeJs
PHP和NodeJs开发的应用如何共用Session
Apr 16 NodeJs
使用nodejs中httpProxy代理时候出现404异常的解决方法
Aug 15 NodeJs
NodeJS中的MongoDB快速入门详细教程
Nov 11 NodeJs
详解使用vscode+es6写nodejs服务端调试配置
Sep 21 NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 NodeJs
nodeJS微信分享
Dec 20 NodeJs
NodeJS使用Range请求实现下载功能的方法示例
Oct 12 NodeJs
nodejs中实现用户注册路由功能
May 20 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 NodeJs
如何利用nodejs自动定时发送邮件提醒(超实用)
Dec 01 NodeJs
ubuntu系统下使用pm2设置nodejs开机自启动的方法
May 12 NodeJs
node快速搭建后台的实现步骤
nodejs利用readline提示输入内容实例代码
详解NodeJS模块化
NodeJs内存占用过高的排查实战记录
详解nodejs内置模块
May 06 #NodeJs
浅谈JS和Nodejs中的事件驱动
May 05 #NodeJs
ubuntu系统下使用pm2设置nodejs开机自启动的方法
May 12 #NodeJs
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
JS中常用的消息框总结
2018/02/24 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
Python安装第三方库的3种方法
2015/06/21 Python
Python实现的快速排序算法详解
2017/08/01 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python Subprocess模块原理及实例
2019/08/26 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
迎接领导欢迎词
2014/01/11 职场文书
韩国商务邀请函
2014/01/14 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
护士医德医风自我评价
2014/09/15 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
python内置进制转换函数的操作
2021/06/02 Python
python可视化之颜色映射详解
2021/09/15 Python
php png失真的原因及解决办法
2021/11/17 PHP