首页 > 资讯 > 前端开发 > JavaScript >NodeJs使用webpack打包项目的方法详解

965

分享到

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

2024-04-02 19:04:59 965人浏览泡泡鱼

摘要

目录webpackWEBPack的使用第一步:初始化项目:npm init -y第二步:新建 src/index.html第三步:安装模块Jquery npm i

第一步:初始化项目:npm init -y
第二步:新建 src/index.html
第三步:安装模块Jquery npm install jquery
第四步:测试隔行换色
第五步:安装webpack(两个包)npm install webpack webpack-cli -D (开发模式)
第六步:新建webpack.config.js
第七步:修改package.JSON(可有可无,运行方式不同)
第八步:执行打包npm run dev

WebPack打包CSS

第一步:安装处理css的loader:npm i style-loader css-loader -D
第二步:修改webpack.config.js:
第三步:引入CSS文件:`
第四步:运行测试:npm run dev

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


module.exports={
    //调试时使用development开发模式
    //打包时使用production生产模式
    mode : 'development'   
}

配置文件部分属性:

默认打包入口:/src/index.js
默认打包出口:/dist/main.js

可进行配置:


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:

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

总结

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: NodeJs使用webpack打包项目的方法详解

本文链接: https://www.lsjlt.com/news/140787.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

目录WebpackWebPack的使用第一步:初始化项目:npm init -y第二步:新建 src/index.html第三步:安装模块Jquery npm i...

99+

2022-11-13
express搭建的nodejs项目使用webpack进行压缩打包

背景：本文记录使用express搭建nodejs后台接口服务，为了能放到服务器上面，需要对项目进行压缩打包，使用了webpack5，记录过程和问题。项目结构比较简单，入口是app....

99+

2022-12-27

nodejs项目打包部署 nodejs打包发布 express搭建nodejs项目
使用vue-cli创建项目并webpack打包的操作方法

1.准备环境（nodejs下载和设置环境变量） 2.全局安装vue-cli，提供vue命令进行创建vue项目 npm install -g @vue/cli 关于旧版本 Vue...

99+

2022-11-12
详解Vue项目的打包方式

目录一、相关配置情况一（使用的工具是 vue-cil）情况二（使用的工具是 webpack）二、打包总结一、相关配置情况一（使用的工具是 vue-cil） ...

99+

2022-11-12
webpack创建项目并打包的详细流程记录

目录webpack基础设置关于loader总结webpack基础设置 1、新建项目 2、在项目中创建两个文件夹 src 和 dist，其中src文件夹用于存放开发时写的js、css等...

99+

2023-03-19

webpack怎么打包项目 webpack打包构建过程 webpack搭建项目
Springboot项目的打包方法

这篇文章主要介绍“Springboot项目的打包方法”，在日常操作中，相信很多人在Springboot项目的打包方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Springboot项目的打包方法”的疑惑有所...

99+

2023-06-19
Vue项目中打包优化的四种方法详解

目录前言打包优化的目的:性能优化的主要方向:1.异步组件配置(路由懒加载)2.去掉打包后的 console3.使用CDN4.yarn build生成dist目录总结前言默认情况下，...

99+

2022-11-13
如何使用vue-cli创建项目并webpack打包

这篇文章主要介绍“如何使用vue-cli创建项目并webpack打包”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用vue-cli创建项目并webpack打包...

99+

2022-10-19
详解Vue项目的打包方式(生成dist文件)

目录一、相关配置情况一（使用的工具是 vue-cil）情况二（使用的工具是 webpack）二、打包一、相关配置情况一（使用的工具是 vue-cil） &n...

99+

2022-11-13
详解java项目打包docker镜像的几种方式

目录前言一、背景环境二、打包方式（三种）1. 在idea环境里打包方式一2. 在idea环境里打包方式二3. 基本打包方式三、启动服务四、总结前言本文章记录了 sprin...

99+

2023-01-15

java项目打包docker镜像 java打包docker镜像
SpringBoot项目jar和war打包部署方式详解

目录jar与warjar包部署运行war包部署运行jar与war Spring Boot项目开发完成后，需要以jar或war的方式将项目打包部署到测试开发环境。 jar即Java A...

99+

2022-11-13
electron打包vue项目的方法步骤

目录创建项目添加electron-builderelectron下载失败窗体运行打包exe白屏创建项目点击这里添加electron-builder 1、在项目目录下运行命令：vu...

99+

2022-11-13
Maven 项目用Assembly打包可执行jar包的方法

目录1、添加maven插件2、mvn clean（清理下项目）3、maven update project(用eclipse工具)4、命令后执行命令mvn assembly:asse...

99+

2023-03-01

Maven打包可执行jar包 Maven Assembly打包
python项目依赖包打包的方法是什么

在Python项目中，可以使用pip工具来管理和打包项目依赖包。以下是一些常见的方法：1. 使用requirements.txt文件...

99+

2023-09-23

python
java Springboot项目打包的方法是什么

这篇文章主要讲解了“java Springboot项目打包的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“java Springboot项目打包的方法是什么”吧！一、打包方式通过m...

99+

2023-06-05
react前端项目打包优化的方法

今天小编给大家分享一下react前端项目打包优化的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。分析通过控制台判断加载资...

99+

2023-06-05
分享PyCharm项目打包的简易方法

简单易懂的PyCharm项目打包方法分享随着Python的流行，越来越多的开发者使用PyCharm作为Python开发的主要工具。PyCharm是功能强大的集成开发环境，它提供了许多方便的功能来帮助我们提高开发效率。其中一个重要的功能就是项...

99+

2023-12-30

项目 Pycharm 打包
vue项目中main.js使用方法详解

目录第一部分：main.js文件解析第二部分：Vue.use的作用以及什么时候使用Vue.use是什么？（官方文档）Vue.use()什么时候使用？补充：关于main.js方便小技巧...

99+

2022-11-13
webpack项目中使用vite加速的兼容模式详解

目录前言目的要处理的问题动手共用 index.html共用配置兼容环境变量自动导入资源引入svg-sprite-loader 替代方案其他效果前言随着公司前端工程越来越大，启动是无...

99+

2022-11-13
vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法

目前 vue-cli已经发布5.0了，webpack 配置上也与之前老版本的有所不同，调整 webpack 配置最简单的方式就是在 vue.config.js 中...

99+

2022-11-13