webpack的简单使用

yarn包管理器的使用：

安装：npm i -g yarn

yarn -v 查看版本

yarn init 初始化项目环境（生成package.json包管理文件）

yarn add 包名 添加包

yarn remove 包名 移除包

yarn 安装全部依赖

安装webpack:yarn add webpack webpack-cli -D

配置scripts(自定义命令):

scripts:{
"build":"webpack"
}

默认入口：src/index.js;

默认出口：dist/main.js;(自动生成)；

修改默认入口/出口：

在src并列出创建webpack.config.js

填入配置项：

const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',//入口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',//出口，根据自己需求配置
  },
};

webpack配置插件：html-webpack-plugin插件(自动生成html)

module.exports = {
    entry: './src/main.js', //入口
    output: {
        //出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
    ],
}

webpack使用加载器：

1. 下载加载器

2. webpack.config.js配置

css-loader处理css
yarn add css-loader style-loader -D 下载安装包

 module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

less-loader处理less
yarn add less-loader less -D

 module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },

处理图片：（asset方式）

webpack5_asset module(无需额外包)webpack内置

{
  test: /\.(png|jpg|gif|jpeg)$/,
  type: 'asset'
}

处理字体图标：（asset/resource方式）

 {
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',
    generator: {
        filename: 'fonts/[name].[hash:6][ext]',
    },
 },

高版本降级：

babel处理高版本的语法

yarn add  -D babel-loader @babel/core @babel/preset-env

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

开启webpack开发服务器 webpack-dev-server （启动开发服务器，自动重新打包和刷新浏览器
）

安装依赖包  yarn add webpack-dev-server -D
配置脚本  "serve": "webpack server"          
开发时   yarn serve      打包时   yarn build
额外的配置

module.exports = {
  //...
  devServer: {
    port: 8080,
    open: true,
  },
};

详细查看webpack官方文档