Webpack

构建工具

1、压缩代码、排除没有被引用的依赖、
2、兼容性 （系统差异、浏览器差异、浏览器版本差异）
支持es的模块化问题，以及commonjs，支持扩展静态资源打包

3、保密性
4、作用域问题(JQuery 绑定 $、loadash 绑定 _ )、文件太大、可维护性差

原生js常见问题
  • 文件太大
    多个文件会导致加载速度慢，而合并成一个文件，会造成网络瓶颈，会有短暂的白屏现象
  • 作用域问题
    在一些库文件，jquery、lodash、bootstrap分别会在window下绑定全局变量(例如$、_ 、还有自己绑定的变量)，会污染window对象变得臃肿
  • 可读性差
  • 可维护性弱
    所有文件都合并在一个超大文件里，可读性差，维护性差

作用域问题解决

早期使用grunt、gulp来管理项目资源(任务执行器)、利用js的立即调用函数表达式(IIFE)，将所有项目文件拼接组合在一起，现在则是以esmodule，comminjs的模块化，但浏览器并不完全支持commonjs，通过webpack对commonjs进行打包

代码拆分问题

1
2
3
4
5
6
7
8
9
10
11
12
// main1.js
const min = ()=>{
    return min
}
const max = ()=>{
    return max
}
// 暴露
modules.exports = {
    min,
   	max
}
1
2
3
// main2.js
const el = request('./main1.js')
console.log(el.min())
1
2
3
4
5
6
7
8
9
10
// 通过ECMAScript(es)模块化  html调用
...
// 上述使用的是commonjs规范，浏览器需要指定type为module
// 通常，我们可以使用 Browserify 或 Webpack 等打包工具将 CommonJS 模块打包成浏览器可以理解的格式。
<script type="module">
    // 直接使用file://调用会造成跨域问题，需要配合httpServer使用
    import add from './main1.js'
    console.log(min())
</script>
...
安装
  • --save 和 --development 的区别
    npm 可以指定依赖是安装在生产环境还是开发环境
    如果希望是在开发环境用，使用 --development(-D)
    如果希望是在生产环境用，使用--save(-S)

webpack配置项

指定webpack配置

  • 命令行使用

    1
    webpack --config lg.webpack.js

可直接在项目package.json 中配置调试命令，

1
2
3
4
5
6
7
8
9
10
{
    name: "",
    version: "",
    description: "",
    main: "",
    "script": {
        "test": "webpack --config lg.webpack.js"
    }
    ...
}
输入输出

  • 命令行 参数

    1
    2
    3
    # --entry 输入
    # --output-path 输出路径
    npm webpack --entry ./src/main1.js --output-path ./build

  • 配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // webpack.config.js
    const path = require('path')
    module.exports = {
        entry: '.src/index.js', // 输入
        output: {
            filename: 'build.js', // 输出文件名
            path: path.resolve(__dirname, 'dist') // 输出路径
        }
    }
Loader

为什么需要使用loader

前端项目中，需要处理不同类型的文件，例如 JavaScript、CSS、图片、字体等

  • 处理不同类型的文件
    css，sass/less、TypeScript、图片、字体等，es语法转换
  • 模块化
    以模块化的方式组织和管理，根据配置保持项目的一致性
  • 提高开发效率
    构建时自动处理代码、样式、资源的转换工作
  • 解决ES语法的兼容性
    大部分浏览器不兼容太新的es语法

loader是什么

Loader 是 Webpack 中的一个功能，用于转换模块的类型

常用的 loader 包括：

  • babel-loader：用于将 ES6+ 的 JavaScript 代码转换为 ES5，使其能够兼容旧版浏览器。
  • style-loader 和 css-loader：用于处理 CSS 文件，使其能够在 JavaScript 中引入。
  • sass-loader：用于将 SASS（或 SCSS）文件转换为 CSS。
  • file-loader 和 url-loader：用于处理图片和字体等静态资源。
css-loader、style-loader

  • 安装

    1
    2
    npm i css-loader -D
    npm i style-loader -D

  • 行内使用

    1
    import 'css-loader!../css/main.css'

  • 配置文件使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // webpack.config.js
    // 同一个loader数组，执行顺序为+
    module.exports = {
        module: {
            reules:[
                {
                    test: /\.css$/,	// 正则匹配规则，匹配需要处理的文件
                    use: [	// 使用的loader(执行顺序从下往上)
                        {
                            loader: 'style-loader'
                            // options: 输出路径
                        },
                        {
                            loader: 'css-loader'
                        }
                    ]
                },
                // 单个loader简写方式1
                {
                    test: /\.css$/,
                    loader: 'css-loader'
                }
                // 简写方式2
                {
                	test: /\.css$/,
                	use: ['style-loader', 'css-loader'] // 执行顺序从右到左
                }
            ]
        }
    }
less-loader

  • 安装

    1
    2
    3
    4
    npm i less-loader -D
    // 
    npm i less -D
    npm less xx.less xx.css

  • 使用

    1
    2
    3
    4
    5
    6
    7
    // main.less
    @bgColor： 'green';
    @fontSize: 25px;
    body{
        background-color: @bgColor;
        font-size: @fontSize;
    }

  • 配置文件使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    // webpack.config.js
    // 同一个loader数组，执行顺序为+
    module.exports = {
        module: {
            reules:[
                {
                    test: /\.css$/,	// 正则匹配规则，匹配需要处理的文件
                    use: [	// 使用的loader(执行顺序从下往上)
                        {
                            loader: 'style-loader'
                            // options: 输出路径
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'less-loader'
                        }
                    ]
                },
                // 简写方式2
                {
                	test: /\.css$/,
                	use: ['style-loader', 'css-loader','less-loader'] // 执行顺序从右到左
                }
            ]
        }
    }
Browserslist
postcss
postcss-loader
postcss-preset-env

​ aaaaaaaaaaaaaaaaaaaaaaaassssssss