通过隔行变色案例了解webpack的使用

1、搭建案例文件结构

2、在工作目录执行npm init -y进行初始化生成package.json文件

3、执行npm i jquery,配置main.js文件如下

// 导入jquery类库
import $ from 'jquery'

$(function () {
  // 设置奇数行背景色
  $('li:odd').css('backgroundColor', 'pink')
  // 设置偶数行背景色
  $('li:even').css('backgroundColor', 'skyblue')
})

4、依次执行npm i webpack -D、npm i webpack-cli -D、npm i webpack-dev-server -D、npm i html-webpack-plugin -D
1).修改package.json文件

"scripts": {
    "dev": "webpack-dev-server"
  }

2).在文件根目录新建一个webpack.config.js文件

// 导入处理路径的模块
const path = require('path')
// 启用热更新的第二步
const webpack = require('webpack')
// 导入自动生成HTML文件的插件
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 项目入口文件
  entry: './src/main.js',
  // 配置输出选项
  output: {
    // 配置输出路径
    path: path.resolve(__dirname, 'dist'),
    // 配置输出的文件名
    filename: 'bundle.js'
  },
  devServer: {
    // 自动打开浏览器
    open: true,
    // 设置启动时候的运行端口
    port: 3000,
    // 指定托管的根目录
    contentBase: 'src',
    // 启用热更新第一步
    hot: true
  },
  // 添加plugins节点配置插件
  plugins: [
    // 启用热更新的第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
      // 模板路径
      template: path.join(__dirname, './src/index.html'),
      // 自动生成的HTML文件的名称
      filename: 'index.html'
    })
  ]
}

5、使用webpack打包css文件
执行npm i style-loader css-loader -D
修改webpack.config.js这个配置文件（注意：use中相关loader模块的调用顺序是从后向前调用的）

module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader']}
    ]
  }

6、使用webpack打包less文件
执行npm i less-loader less -D
修改webpack.config.js这个配置文件

 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}

7、使用webpack打包sass文件
执行npm i sass-loader node-sass -D
修改webpack.config.js这个配置文件

 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}

8、验证结果
在src目录下创建三个样式文件index.css、index.less、index.scss
index.css

li {
  list-style: none;
}

index.less

ul {
  margin: 0;
  padding: 0;
}

index.scss

html,
body {
  margin: 0;
  padding: 0;

  li {
    font-size: 16px;
    line-height: 32px;
  }
}

再在main.js这个文件中添加配置

// 使用 import 语法，导入 CSS样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'

最后执行npm run dev，执行成功后会自动打开浏览器界面，如果看到的样式和配置的一致、修改main.js的颜色属性保存后界面可以自动刷新，说明验证成功。

附：启动配置的两种实现方式
方式一：

"scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  }

方式二：

devServer: {
    // 自动打开浏览器
    open: true,
    // 设置启动时候的运行端口
    port: 3000,
    // 指定托管的根目录
    contentBase: 'src',
    // 启用热更新第一步
    hot: true
  }

浏览器显示界面