webpack项目配置（未完成）

最新推荐文章于 2024-08-13 19:40:32 发布

air_shing

最新推荐文章于 2024-08-13 19:40:32 发布

阅读量329

点赞数

分类专栏： vue webpack 文章标签： webpack 前端 npm

本文链接：https://blog.csdn.net/kanonshing/article/details/122313235

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何创建并初始化一个webpack项目，详细讲解了全局安装与项目内安装webpack的步骤。此外，还涉及到了如何在项目中引入jQuery类库，并且详细阐述了如何配置和安装自动刷新功能，提升开发效率。

摘要由CSDN通过智能技术生成

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

运行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 启动项目

air_shing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack项目配置（未完成）

创建项目，初始化项目 — 这里使用隔行变色的主页来做演示。运行npm init -y初始化项目，使用npm管理项目中的依赖包init后会生出 package.jsonnpm init -y创建需要的文件夹和文件webpack安装的两种方式运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令在项目根目录中运行 npm i webpack -D 安装到项目依赖中npm i webpack -D使用npm i jquery -S安装
复制链接

扫一扫

专栏目录