脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → NodeJs使用webpack打包项目的方法

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

 更新时间：2022年02月28日 15:06:51   作者：碰磕  
这篇文章主要为大家详细介绍了NodeJs使用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自动打包

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容! 

您可能感兴趣的文章:

相关文章

  • nodejs的错误处理过程记录

    nodejs的错误处理过程记录

    这篇文章主要给大家介绍了关于nodejs的错误处理过程的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • nodejs实现UDP组播示例方法

    nodejs实现UDP组播示例方法

    这篇文章主要介绍了nodejs实现UDP组播示例方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 详解在Node.js中发起HTTP请求的5种方法

    详解在Node.js中发起HTTP请求的5种方法

    这篇文章主要介绍了详解在Node.js中发起HTTP请求的5种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • node.js中 stream使用教程

    node.js中 stream使用教程

    Stream 是一个抽象接口，Node 中有很多对象实现了这个接口。例如，对http 服务器发起请求的request 对象就是一个 Stream，还有stdout（标准输出）。
    2016-08-08
  • 基于promise.js实现nodejs的promises库

    基于promise.js实现nodejs的promises库

    promise是JavaScript实现优雅编程的一个非常不错的轻量级框架。该框架可以让你从杂乱的多重异步回调代码中解脱出来，并把精力集中到你的业务逻辑上。
    2014-07-07
  • node.js 实现手机号验证码登录功能

    node.js 实现手机号验证码登录功能

    这篇文章主要介绍了node.js 实现手机号验证码登录功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • 快速删除 node_modules 目录的集中方法(多种方法)

    快速删除 node_modules 目录的集中方法(多种方法)

    本文介绍了三种快速删除node_modules目录的方法：使用rimraf工具、通过npx运行rimraf以及在Windows命令提示符中使用del命令,每种方法都适合不同的操作系统和使用场景
    2024-11-11
  • NodeJS如何优雅的实现Sleep休眠

    NodeJS如何优雅的实现Sleep休眠

    这篇文章主要介绍了NodeJS如何优雅的实现Sleep休眠问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09
  • express框架实现基于Websocket建立的简易聊天室

    express框架实现基于Websocket建立的简易聊天室

    本篇文章主要介绍了express框架实现基于Websocket建立的简易聊天室，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • nodejs模块学习之connect解析

    nodejs模块学习之connect解析

    这篇文章主要介绍了nodejs模块学习之connect解析,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论