前端学习之webpack

概述

webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的问题。
webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作重心放到具体的功能实现上,提高了开发效率和项目的可维护性。

webpack的基本使用

  1. 创建列表各行变色项目
    ①新建项目空白目录,并运行npm init -y命令,初始化包管理配置文件package.json
    ②新建src源代码目录
    ③新建src->index.html首页
    ④初始化首页基本的结构,即给index.html添加如下内容:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <script src="../dist/main.js">script>
head>
<body>
    <ul>
        <li>这是第1个标签li>
        <li>这是第2个标签li>
        <li>这是第3个标签li>
        <li>这是第4个标签li>
        <li>这是第5个标签li>
        <li>这是第6个标签li>
        <li>这是第7个标签li>
        <li>这是第8个标签li>
        <li>这是第9个标签li>
    ul>
body>
html>

⑤运行npm install jquery -s命令,安装jQuery
⑥通过模块化的形式,实现列表隔行变色的效果
创建一个index.js文件,加入以下内容:

import $ from 'jquery'
//给奇偶行设置不同的背景色
$(function(){
    $('li:odd').css('backgroundColor','pink')
    $('li:even').css('backgroundColor','green')
})

然后在index.html文件中通过以下命令将index.js引入进来:

<script src="./index.js"></script>

但是我们通过浏览器查看,发现列表变色并没有设置成功,这是因为index.js里面的内容是ES6的书写格式,浏览器不识别;这个时候我们可以使用webpack进行打包,将没有兼容性的代码转化为有兼容性的代码,最后在index.html中引入的应该是我们使用webpack转换后的js代码,具体操作见下述2
2. 在项目中安装和配置webpack
①运行npm install webpack webpack-cli -D命令,安装webpack相关的包
②在项目根目录中,创建名为webpack.config.js的webpack配置文件
③在webpack配置文件中,初始化如下基本配置

module.exports={
	mode:'development'   //mode用来指定构建模式
}

④在package.json配置文件中的scripts节点下,新增dev脚本如下:

"scripts":{
	"dev":"webpack"    //scripts节点下的脚本可以通过npm run 执行
}

⑤在终端执行npm run dev命令,启动webpack进行项目打包
执行完这个命令后会在根目录生成一个dist文件夹,文件夹中有一个main.js文件,就是我们转换后的文件,将这个文件引入index.html中,就能够实现上述的列表变色了

你可能感兴趣的:(前端,前端,学习,webpack)