首页 > 其他分享> 文章详细

初识webpack

2022-09-01 01:02:22 阅读：178 来源： 互联网

标签：npm 配置文件 li webpack 初识 js 打包

1.什么是webpack?

概念：webpack是前端项目工程化的具体解决方案

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性（根据配置，来兼容不同的浏览器版本）、性能优化等强大的功能

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前Vue,React等前端项目，基本上都是基于webpack 进行工程化开发的

2.创建列表隔行变色项目

创建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
新建scr源代码目录
新建src -> index.html 首页和 src -> index.js 脚本文件

初始化首页基本的结构

<!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>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <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>
    </ul>
</body>
</html>

//1.使用ES6导入语法，导入JQuery
import $ from 'jquery'

//2.定义jQuery的入口函数
$(function () {
    //3.实现奇偶行变色
    //奇数行为红色
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','pink')
  })

运行 npm install jquery -S 命令(全写方式： npm install jquery --save，安装jQuery
通过 ES6-模块化方式导入jQuery，实现列表隔行变色效果

3.在项目中安装webpack，解决import $ from 'jquery'兼容性问题

　在终端运行如下命令，安装webpack相关的两个包：

npm install webpack@5.42.1 webpack-cli@ -D

-D 的意思是把下边两个包装到，package.json中 devDependencies目录下，是--save-dev的缩写

4.在项目中配置webpack

在项目跟目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：

//使用 node.js中的导出语法，向外导出一个 webpack的配置对象
module.exports = {
    //代表 webpack 运行的模式，可选值有两个 development和production
    mode:'production'
}

在package.json中配置启动脚本

  "scripts": {
    "dev":"webpack" // script节点下的脚本，可以通过npm执行，例如npm run dev
  }

mode的可选值　，mode的可选值有两个，分别是

development
1. 　　开发环境
2. 不会对打包生成的文件进行代码压缩和性能压缩
3. 打包速度快，适合在开发阶段使用
production
1. 生产环境
2. 会对打包生成的文件进行代码压缩和性能优化
3. 打包速度很慢，仅适合在项目发布阶段使用

webpack.config.js是webpack的配置文件

　　webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注意：由于webpack是基于node.js开发处理的打包工具，因此在他的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置

webpac的默认约定
1. 　　在webpack4.X和5.X的版本中，有如下的默认约定
  1. 在默认的打包入口文件为src ->index.js
  2. 默认的输出文件路径为dist->main.js
2. 注意：可以在webpack.config.js中修改打包的默认约定

自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口，示例代码如下：

const path = require('path') //导入node.js 中专门操作路径的模块

module.exports = {
    entry：path.join(__dirname,'./src/index.js'),//打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件的存放路径
        filename:'bundle.js'
    }
}

标签：npm,配置文件,li,webpack,初识,js,打包
来源： https://www.cnblogs.com/funkyd/p/16644947.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

初识webpack