webpack项目配置未完成

创建项目，初始化项目 — 这里使用隔行变色的主页来做演示。

运行npm init -y初始化项目，使用npm管理项目中的依赖包
init后会生出 package.json

npm init -y

创建需要的文件夹和文件

在这里插入图片描述

webpack安装的两种方式

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行 npm i webpack -D 安装到项目依赖中
```
npm i webpack -D
```

使用npm i jquery -S安装jquery类库
创建 index.html

<!-- ul>li*10{这是第$个li} -->
<body>
  <ul>
    <li>第1个li标签</li>
    <li>第2个li标签</li>
    <li>第3个li标签</li>
    <li>第4个li标签</li>
    <li>第5个li标签</li>
    <li>第6个li标签</li>
    <li>第7个li标签</li>
    <li>第8个li标签</li>
    <li>第9个li标签</li>
    <li>第10个li标签</li>
  </ul>
</body>

创建main.js并书写各行变色的代码逻辑：

import $ from 'jquery'

$(function () {
  $('li:odd').css('backgroundColor', 'skyblue')
  $('li:even').css('backgroundColor', 'red')
})

创建webpack.config.js

const path = require('path')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  mode: 'development',
  // 配置开发服务器，代码变化，自动刷新
  devServer: {
  	// 这个很重要，配置不对，会出现Cannot GET /
    static: '../webpack-s',
    // 浏览器网址上显示的端口号
    port: 3000,
    // 是否自动打开浏览器 
    open: true
  }
}

安装自动刷新功能

运行npm i webpack-dev-server -D安装到开发依赖

npm i webpack-dev-server -D

运行 npm run dev 启动项目

webpack项目配置未完成

创建项目，初始化项目 — 这里使用隔行变色的主页来做演示。

webpack安装的两种方式

安装自动刷新功能

相关文章