webpack打包构建列表隔行变色案例

最新推荐文章于 2022-10-09 11:29:13 发布

崔瑞霞

最新推荐文章于 2022-10-09 11:29:13 发布

阅读量138

点赞数

文章标签： javascript node.js vue.js webpack

本文链接：https://blog.csdn.net/weixin_55769952/article/details/120023782

版权

一、什么是Webpack？

Webpack 是一个前端资源加载/打包工具（项目构建工具）。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
webpack 提供了友好的模块化支持，以及资源的合并、打包、压缩、混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

二、webpack安装的两种方式

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
查看webpack 信息 webpack -v
安装package.json说明文件命令：npm init -y

代码如下（示例）：

//webpack.config.js文件代码：
let path = require('path');
module.exports = {
  mode: 'production',
  entry: {
    index_: path.resolve(__dirname, 'src/index.js'),
    first_: path.resolve(__dirname, 'src/first.js')
  }, //多入口

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

//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>Document</title>
    <script src="./dist/index_.js"></script>
    <script src="./dist/first_.js"></script>
    <style>
        ul{
            list-style:none;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>走进九月，让我们挥手昨日的哀伤与忧愁，作别往日的烦恼与纠结；让我们整装待发，重新启航。因为过去无法重来，明天还是未知</li>
        <li>红尘中，还有一份如水清澈的缘分。不甜腻，却真诚；不浓烈，却久长。他（她）总在身后不起眼的角落里默默地守候着我们</li>
        <li>秋高气爽的天空，还有给我带来欢笑的你，也让我的秋天变得更加深邃和柔美，如一幅疏疏淡淡的水墨画，写意着生命的斑驳</li>
        <li>青年人，是高升的太阳，一生最美好的时间就是青年。加里宁曾说：青年是一个美好的而又是一去不可再得的时期，是将来一切光明和幸福的开端</li>
        <li>魅力，可能真的是一种天赋，但是如果后天也可以培养良好的性格，高雅的品味，得体的谈吐</li>
        <li>面对淡远的情感，无需刻意靠近，想开看淡即可，用自在从容的心态迎接每一个黎明的开始</li>
        <li>谈来的人，时间再久见面都如故，不是一条道的，永远难倾心。别天真的以为，到谁门前都有那壶热茶等着你</li>
        <li>人生就是一场旅途，若能看一些好景，念一处明媚，途径一场花开，便足够了，所以，那些路过的风景，我学会了微笑着记起</li>
        <li>恰好的幸福，一如简单的生活。路上遇到什么，拿起什么，过去什么，放下什么，不要拖着长长的尾巴，越拖越累，也不要贪着太多</li>
        <li>人生是一场单程的旅行，一路的风景是多么的迷人而曼妙，也是多么的令人失落和感伤。我们为了看到下一站的风景</li>
      </ul>
</body>
</html>

//index.js文件代码：
import $$$ from 'jquery'


$$$(function () {
  $$$('#list>li:odd').css({
    'background': '#28C5FB'
  });

  $$$('#list>li:even').css({
    'background': '#FD67FE'
  });

});

//first.js文件代码：
console.log('我是first.js模块');

效果：

在这里插入图片描述

崔瑞霞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack打包构建列表隔行变色案例

一、什么是Webpack？Webpack 是一个前端资源加载/打包工具（项目构建工具）。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack 提供了友好的模块化支持，以及资源的合并、打包、压缩、混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。二、webpack安装的两种方式运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
复制链接

扫一扫