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 相关文章推荐
NodeJS学习笔记之Connect中间件应用实例
Jan 27 NodeJs
NodeJS中利用Promise来封装异步函数
Feb 25 NodeJs
NodeJS连接MongoDB数据库时报错的快速解决方法
May 13 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
Jun 19 NodeJs
详解nodejs实现本地上传图片并预览功能(express4.0+)
Jun 28 NodeJs
nodejs简单读写excel内容的方法示例
Mar 16 NodeJs
nodejs多版本管理总结
Apr 03 NodeJs
Nodejs 和 Electron ubuntu下快速安装过程
May 04 NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 NodeJs
M2实现Nodejs项目自动部署的方法步骤
May 05 NodeJs
nodeJs项目在阿里云的简单部署
Nov 27 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中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
深入了解NumPy 高级索引
2020/07/24 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
2014年科研工作总结
2014/12/03 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫