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进程管理模块forever详解
Jun 01 NodeJs
nodejs中使用monk访问mongodb
Jul 06 NodeJs
基于promise.js实现nodejs的promises库
Jul 06 NodeJs
基于 Docker 开发 NodeJS 应用
Jul 30 NodeJs
用nodejs的实现原理和搭建服务器(动态)
Aug 10 NodeJs
nodejs中模块定义实例详解
Mar 18 NodeJs
nodejs入门教程一:概念与用法简介
Apr 24 NodeJs
Express+Nodejs 下的登录拦截实现代码
Jul 01 NodeJs
nodejs基础之常用工具模块util用法分析
Dec 26 NodeJs
nodejs微信开发之授权登录+获取用户信息
Mar 17 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
详解利用nodejs对本地json文件进行增删改查
Sep 20 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安装攻略:常见问题解答(一)
2006/10/09 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
python多线程http下载实现示例
2013/12/30 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python创建临时文件夹的方法
2015/07/06 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python 中Pickle库的使用详解
2018/02/24 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python协程之动态添加任务的方法
2019/02/19 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
运动会演讲稿
2014/05/07 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
大型公益活动策划方案
2014/08/20 职场文书
经营场所证明范本
2015/06/19 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python