webpack基础应用

开发模式：仅能编译js的es module语法
生产模式：能编译js的es module语法，还能压缩js代码
5大核心概念
1.entry(入口)
指示webpack从那个文件开始打包
2.output （输出）
指示webpack打包完的文件输出到哪里去，如何命名等
3.loader(加载器)
webpack本身只能处理js /json 等资源，其他资源需要借助loader,webpack才能解析
4.plugins(插件)
扩展webpack的功能
5.mode(模式)
开发模式：development
生产模式：production

开发模式配置

不需要输出dist文件夹，有文件改动时，开发服务器监听到自动运行

const path = require("path");//nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //入口
    entry: "./src/main.js",// 相对路径
    //输出
    output: {
        //文件的输出路径
        //__dirname nodejs的变量，代表当前文件的文件夹目录
        //开发模式没有输出
        // path: path.resolve(__dirname, "dist"),//绝对路径
        path:undefined,
        //文件名
        filename: "static/js/main.js",
        //自动清空上次打包内容
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean: true,
    },
    //加载器
    module: {
        rules: [
            //loader的配置
            {
                test: /\.css$/,//只会检测.css文件
                use: [
                    //执行顺序，从右到左（从下到上）
                    "style-loader",//将js中css通过创建style标签添加到html文件中生效
                    "css-loader"//将css资源编译成commonjs的模块到js中
                ]
            },
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',//将less编译成css文件
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        //小于10kb的图片转base64
                        //优点：减少请求次数，缺点文件大一点
                        maxSize: 10 * 1024,
                    }
                },
                generator: {
                    //输出图片名称hash文件的hash名，ext文件扩展名query图片请求路径携带的参数
                    //hash:10只取前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",
                generator: {
                    //输出图片名称hash文件的hash名，ext文件扩展名query图片请求路径携带的参数
                    //hash:10只取前10位
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,//排除node_module中的js文件不处理
                loader: 'babel-loader',
                // options: {
                //     presets: ['@babel/preset-env']
                // } //在babel.config.js维护
            }
        ]
    },
    //插件
    plugins: [
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({
            //模板，以public/index.htm文件创建新的html文件;
            //新的html文件特点：1.结构和原来一致2.自动引入打包输出的资源
            template: path.resolve(__dirname, '../public/index.html')
        })
    ],
    //开发服务器:不会输出资源，在内存中编译打包的
    devServer: {
        host: "localhost",//启动服务器域名
        port: "3000",//启动服务器端口号
        open: true,//是否自动打开浏览器
    },
    //模式
    mode: "development"
}

Eslint配置.eslintrc.js

module.exports={
    //继承Eslint规则
    extends:["eslint:recommended"],
    env:{
        node:true,//启用node中全局变量
        browser:true,//启用浏览器中全局变量
    },
    parserOptions:{
        ecmaVersion:6,//es 6
        sourceType:"module",//es module
    },
    rules:{
        "no-var":2,//不能使用var定义变量
    }
}

.eslintignore需要忽略处理的文件

dist

生产模式准备

开发完，需要部署上线，对代码进行优化，让其运行性能更好

package.json配置不同模式运行指令

不要开发服务器

const path = require("path");//nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//css兼容处理插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//css压缩插件
//用来获取处理样式的loader方法
function getStyleLOader(pre){
    return  [
        //执行顺序，从右到左（从下到上）
        MiniCssExtractPlugin.loader,//提取css成单独文件
        "css-loader",//将css资源编译成commonjs的模块到js中
        {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
          pre
    ].filter(Boolean)
}
module.exports = {
    //入口
    entry: "./src/main.js",// 相对路径
    //输出
    output: {
        //文件的输出路径
        //__dirname nodejs的变量，代表当前文件的文件夹目录
        //开发模式没有输出
        path: path.resolve(__dirname, "../dist"),//绝对路径
        //文件名
        filename: "static/js/main.js",
        //自动清空上次打包内容
        //原理，在打包前，将path整个目录内容清空，再进行打包
        clean: true,
    },
    //加载器
    module: {
        rules: [
            //loader的配置
            {
                test: /\.css$/,//只会检测.css文件
                use:getStyleLOader()
            },
            {
                test: /\.less$/i,
                use:getStyleLOader('less-loader')
            },
            {
                test: /\.s[ac]ss$/i,
                use:getStyleLOader('sass-loader') 
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        //小于10kb的图片转base64
                        //优点：减少请求次数，缺点文件大一点
                        maxSize: 10 * 1024,
                    }
                },
                generator: {
                    //输出图片名称hash文件的hash名，ext文件扩展名query图片请求路径携带的参数
                    //hash:10只取前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",
                generator: {
                    //输出图片名称hash文件的hash名，ext文件扩展名query图片请求路径携带的参数
                    //hash:10只取前10位
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,//排除node_module中的js文件不处理
                loader: 'babel-loader',
                // options: {
                //     presets: ['@babel/preset-env']
                // } //在babel.config.js维护
            }
        ]
    },
    //插件
    plugins: [
        //plugin的配置
        new ESLintPlugin({
            //检测哪些文件
            context: path.resolve(__dirname, '../src')
        }),
        new HtmlWebpackPlugin({
            //模板，以public/index.htm文件创建新的html文件;
            //新的html文件特点：1.结构和原来一致2.自动引入打包输出的资源
            template: path.resolve(__dirname, '../public/index.html')
        }),
        new MiniCssExtractPlugin({
            filename:"static/css/main.css"//打包到指定的文件夹
        }),
        new CssMinimizerPlugin(),
    ],
    //模式
    mode: "production"
}

目前是先编译html文件再css编译成style插入到html文件里
css处理，提取css单独文件，通过link标签引入
处理css兼容问题
npm i postcss-loader postcss postcss-preset-env -D

{
                test: /\.css$/,//只会检测.css文件
                use: [
                    //执行顺序，从右到左（从下到上）
                    MiniCssExtractPlugin.loader,//提取css成单独文件
                    "css-loader",//将css资源编译成commonjs的模块到js中
                    {
                        loader: 'postcss-loader',
                        options: {
                          postcssOptions: {
                            plugins: [
                              [
                                'postcss-preset-env',
                                {
                                  // 其他选项
                                },
                              ],
                            ],
                          },
                        },
                      },
                ]
            },

package.json配置需要兼容的程度
  "browserslist":[
    "last 2 version",//所有浏览器最近的两个版本
    "> 1%",//覆盖99%的浏览器
    "not dead"//不要弃用了
  ]

压缩css