webpack

ES6 中的模块化规范 :

默认导出 : export default {}
默认导入 : 变量名 from ‘模块标识’

按需导出 : export const 变量名 = 值
按需导入 : import {变量名} from ‘模块标识’
==注意 : == 按需导入导出 的变量名要一样 ---- as 起别名

无需导出 : 不用写export
无需变量接收 : 不用起变量 名 直接 import ‘引入需要执行的文件’

webpack 基本概念 和 作用 :

基本概念 : webpack 本身是node的一个第三方模块包
作用 : js应用程序的静态模块打包器;把很多文件整合到一起,缩小项目体积,提高加载速度

yarn 操作命令 :

1 - yarn init -----> 初始化

2 - yarn add 下载的包名 -D -----> (表示下载到开发环境);不加(-D) 默认下载到生产环境

3 - 下载包名 :

1 - webpack webpack-cli —> 打包js代码 (自己配置scripts 命令)
2 - webpack-dev-server -D ----> 开发者服务器(自动刷新)

package.json 中 ---->       
 "scripts" : 
          { 
          "build" :" webpack "                                                                                                            
           "serve": "webpack serve (--config webpack.config.js)可以不加"                                               
          } 

3 - html-webpack-plugin -D ----> 插件 - 自动生成html文件
4 - style-loader css-loader -D -----> 加载器- 处理css文件
5 - less less-loader -D -----> 加载器 - 处理less文件
6 - url-loader file-loader -D -----> 加载器- 处理图片文件
7 - 处理字体图标 —> ↓

 {
            test: /\.(eot|svg|ttf|woff|woff2)$/i, 
                use: [
                    {
                        loader: 'url-loader', 
                        options: {
                            limit: 8192, 
                        },
                    },
                ],
            }

加载器 降级处理 : babel-loader @babel/core @babel/preset-env -D -----> 下载包

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.m?js$/, // \.只匹配.  匹配.js 匹配.mjs结尾的文件
                exclude: /(node_modules|bower_components)/, // 排除node_module和bower_components文件夹下的js
                // node_modules下的第三方包无需降级处理 (提高babel转义速度)
                // 第三方jquery3.6 - 你本身就没考虑低版本问题
                // 直接下jquery1.8
                use: {
                    loader: 'babel-loader', // wepback+babel转义自己js代码
                    options: {
                        presets: ['@babel/preset-env'] // 预设-支持哪些情况
                    }
                }
            }
        ]
    }
};