web开发的困境

  1. 文件依赖错综复杂

  2. 静态资源请求效率低

  3. 模块化支持不友好

  4. 浏览器对高级javascript 支持不好

webpack官网 https://webpack.js.org/

流行的打包工具

友好支持模块化、代码混淆、处理JS兼容、性能优化等

隔行变色示例

1、//创建项目 
webpack01
2、//初始化项目 项目目录下
npm init -y
3、//新建文件夹
src
4、//创建html界面
src/index.html
5、//安装模块
npm i jquery
默认不能访问，浏览器支持不好，要用webpack打包
7、//创建JS文件
src/index.js
8、//安装webpack
npm install webpack webpack-cli -D
9、//创建webpack.config.js 
在项目根目录下创建
10、//编辑webpack.config.js
module.exports={
    //开发模式:development 开发时使用    
    //生产模式:production 项目写完时
    mode:'development'
}
11、//修改package.json 
"scripts": {
    "dev": "webpack"
}
12、//运行
npm run dev

运行后生成的文件 dist/main

image

修改界面的引用

<!-- <script src="../dist/main.js"></script> -->

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="index.js"></script> -->
    <!-- <script src="../dist/main.js"></script> -->
    <!-- <script src="../dist/bundle.js"></script> -->
    <script src="/bundle.js"></script>
  </head>
  <body>
    <h1>Webpack测试</h1>
    <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>
    <table border="1px" cellspacing="0" cellpadding="1px"style="width: 40%;height: 300px;text-align:center">
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td>
        </tr>
        <tr>
            <td>5</td><td>6</td><td>7</td><td>8</td>
        </tr>
        <tr>
            <td>9</td><td>10</td><td>11</td><td>12</td>
        </tr>
        <tr>
            <td>13</td><td>14</td><td>15</td><td>16</td>
        </tr>
        <tr>
            <td>17</td><td>18</td><td>19</td><td>20</td>
        </tr>
        <tr>
            <td>21</td><td>22</td><td>23</td><td>24</td>
        </tr>
        <tr>
            <td>25</td><td>26</td><td>27</td><td>28</td>
        </tr>
    </table>
  </body>
</html>

index.js

import $ from 'jquery'

$(() => {
    $('li:odd').css('backgroundColor', 'pink');
    $('li:even').css('backgroundColor', 'red');

    $("table tr:odd").css('backgroundColor', 'pink')
})

截屏2022-02-24 09.15.29

修改入口出口文件

默认打包入口： src/index.js 出口 dist/main.js

修改webpack.config.js

const path=require('path');
//开发模式:development 开发时使用    
    //生产模式:production 项目写完时
    mode:'development',
    //入口文件不是叫index.js就改这里  后面这个是文件的路径
    entry:path.join(__dirname,'./src/index.js'),
    //出口文件
    output:{
        //打包后存放的路径
        path:path.join(__dirname,'./dist'),
        //打包后的文件名  不改默认叫main.js
        filename: "bundle.js"
}

image

修改之后把界面的引入也需要更改

<!-- <script src="../dist/bundle.js"></script> -->

每次修改后自动打包

1、//安装模块
npm install webpack-dev-server -D
2、//修改package.json
"scripts": {
        "dev": "webpack-dev-server"
}
3、//修改打包后文件位置 打包后在根目录下 看不到
html界面  <script src='/bundle.js'></script>
4、//修改webpack.config.js
const path=require('path');
module.exports={
    //开发模式:development 开发时使用    
    //生产模式:production 项目写完时
    mode:'development',
    //入口文件不是叫index.js就改这里 
    entry:path.join(__dirname,'./src/index.js'),
    //出口文件
    output:{
        path:path.join(__dirname,'./dist'),
        //打包后的文件名 
        filename: "bundle.js"
    },
    //找入口
    devServer:{
        static:'./src',
    }
}
5、//运行
npm run dev 
访问方式 htpp://localhost:8080

修改后自动弹窗

修改package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8090"
}

8921D6AB-8549-4949-AFFF-73A61E7EAC12

打包CSS

加载器

通过loader 打包非 js 模块

less-loader 处理 .less 文件

sass-loader 处理 .scss 文件

url-loader 处理 css文件中相关文件

image

安装处理css的loader

npm i style-loader css-loader -D

创建css文件

#box{
    width:800px;
    height:500px;
    background-color:pink;
    background: url('../images/3210.webp');
    background-size:800px 500px
}

修改webpack.config.js

//加载css模块
    module:{
        rules:[
            //css
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ]
            }
        ]
    }

index.js导入css

import './css/index.css'

image

打包less

下载加载器

npm i less-loader less -D

创建less文件

style.less

//嵌套
@width:200px;
header{
    background-color: pink;
    width: @width;
    height: @width + 100px;
    .log{
        width: 100px;
        height: 50px;
        font-size:40px;
    };
    .nav{
        color:red;
    }
}

修改webpack.config.js

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

image

index.js导入less

import './css/style.less'

image

打包sass

下载加载器

npm i sass-loader node-sass -D

创建sass文件

sass.scss

$boxcolor:pink;
#box2{
    $width:100px;
    width: $width;
    height: 100px;
    background-color:$boxcolor;
}

修改webpack.config.js

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

index.js导入sass

import './css/sass.scss'