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"