webpack简单介绍和使用

最新推荐文章于 2024-07-28 00:56:04 发布

前端小白李小小

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量148

点赞数 1

文章标签： webpack 前端

本文链接：https://blog.csdn.net/qq_45902025/article/details/130704574

版权

文章介绍了Webpack的基本概念和功能，包括它如何进行语法转换、代码压缩和提供开发服务器。通过一个简单的打包演示，展示了如何配置Webpack的入口和输出，以及如何使用npm脚本进行构建。此外，还通过一个基于jQuery实现隔行变色的例子，解释了Webpack如何整合和运行JavaScript代码。

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

一、webpack概述

webpack 是一个基于 NodeJS 的 静态模块打包器 (module bundler)

将来要学的 vue-cli 脚手架环境, 集成了 webpack, 所以才能对各类文件进行打包处理

二、webpack 能做什么

1.语法转换

（1）less/sass转换成css

（2）ES6转换为ES5

（3）typescript转换为原生JS 等等

2.html/css/js 代码压缩合并 (打包)

3.webpack可以在开发期间提供一个开发服务器，提高开发效率

三、webpack 打包演示

1.创建目录 dist/src/main.js

2.初始化

npm init -y

3.安装依赖包 ( -D: 将安装包作为开发阶段的依赖, 只在开发阶段使用, 实际上线不要的, 可以加 -D)

dependencies 项目依赖, 实际上线, 也要用的包, 比如 jquery : npm add jquery

devDependencies 开发依赖, 实际上线, 不用这个包, 只在开发打包过程中用 -D

npm add webpack  webpack-cli  -D

4.配置scripts

scripts: {
	"build": "webpack --config webpack.config.js"
}

5.创建webpack.config.js

基础版本

module.exports = {
  // 入口: 从哪个文件开始打包
  entry: './src/main.js'
}

6.执行脚本

npm run build

四、package.json 中 scripts的使用说明

在package.json文件中, 可以配置 scripts ... 配置自己的命令

"scripts": {
	"pp": "yarn add jquery",
	"build": "webpack --config webpack.config.js"
}

运行方式: npm run xx

特殊的命令: start / stop 可以省略 run

五、基本配置 - 配置入口出口模式

const path = require('path')

module.exports = {
  // entry: 配置入口文件 (从哪个文件开始打包) 
  entry: './src/main.js',

  // output: 配置输出 (打包到哪去)
  output: {
    // 打包输出的目录 (必须是绝对路径)
    path: path.join(__dirname, 'dist'),
    // 打包生成的文件名
    filename: 'bundle.js'
  },

  // 打包模式 production 压缩/development 不压缩
  mode: 'development'
}

六、基于 webpack 实现隔行变色

1.新建 public/index.html 编写代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <!-- ul>li{我是第$个li}*10 -->
  <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>
  </ul>
</div>
</body>
</html>

2.安装jquery，编写代码

npm add jquery

main.js编写代码

// 需求: 通过jquery实现隔行变色
import $ from 'jquery'
$(function() {
  $('#app li:nth-child(odd)').css('color', 'red')
  $('#app li:nth-child(even)').css('color', 'green')
})

3.执行打包命令