WebPack隔行换色案例

在基础配置(具体可见基础打包)下,新建一个index.html。写入

<ul id="myUL">
        <li>这是1</li>
        <li>这是2</li>
        <li>这是3</li>
        <li>这是4</li>
        <li>这是5</li>
        <li>这是6</li>
        <li>这是7</li>
    </ul>
 <script src="../dist/index2.js"></script>

引入jq的包yarn add jquery

在index.js中书写样式

// 引入jquery
import $ from 'jquery'
// 隔行变色的
$("#myUL>li:odd").css('color', 'red')
$("#myUL>li:even").css('color', 'green')

webpack.congfig.js根据情况修改,终端中运行yarn build。浏览器打开html即可

entry: './src/index.js', // webpack入口
    output: { // 出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'index2.js',
    },

2.打包html

下载打包html文件的插件,官方文档(HtmlWebpackPlugin | webpack 中文网

yarn add html-webpack-plugin  -D

在webpack.config.js加,根据文档.然后端口parn build 运行,即可。

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ]
}

3.打包css文件

安装依赖,yarn add style-loader css-loader -D

新建 - src/css/index.css 。编写去除li圆点样式代码。

3.在webpack.cobfig.js里加入
module: { 
        rules: [ // loader的规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }

引入到index.js (因为这里是入口需要产生关系, 才会被webpack找到打包起来)

import "./css/index.css"

4.打包less

下载依赖包

yarn add less less-loader -D

webpack.config.js 配置

rules: [ // loader的规则
    // ...省略其他
    {
    	test: /\.less$/,
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]

src/less/index.less - 设置li字体大小24px

引入到main.js中, import "./less/index.less"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值