WebPack隔行换色案例

案例"/>

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圆点样式代码。

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"