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下打包模块archiver详解
Dec 03 NodeJs
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
Jan 01 NodeJs
Nodejs的express使用教程
Nov 23 NodeJs
nodejs使用express创建一个简单web应用
Mar 31 NodeJs
详解nodejs微信公众号开发——5.素材管理接口
Apr 11 NodeJs
nodejs操作mysql实现增删改查的实例
May 28 NodeJs
深入学习nodejs中的async模块的使用方法
Jul 12 NodeJs
nodejs async异步常用函数总结(推荐)
Nov 17 NodeJs
nodejs中用npm初始化来创建package.json的实例讲解
Oct 10 NodeJs
nodejs图片处理工具gm用法小结
Dec 12 NodeJs
NVM安装nodejs的方法实用步骤
Jan 16 NodeJs
PHPStorm中如何对nodejs项目进行单元测试详解
Feb 28 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 header()函数常用方法总结
2014/04/11 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
2014国培学习感言
2014/03/05 职场文书
毕业设计论文评语
2014/12/31 职场文书
Python基础之数据结构详解
2021/04/28 Python
pandas取dataframe特定行列的实现方法
2021/05/24 Python
php png失真的原因及解决办法
2021/10/24 PHP