webpack

一、yarn

// 设置淘宝镜像源
npm config set registry https://registry.npm.taobao.org

1、安装yarn

npm i yarn -g

2、初始化，得到package.json文件，保存所有包以及版本号

yarninit-y ===》npminit-y

3、添加包（依赖）

yarnadd包名或者yarnadd包名@版本号 ===》npmi包名

4、移除包

yarnremove包名 ===》npmuni包名

将项目传到git时，会忽略node_modules文件，别人运行项目

yarn ===》npmi

5、安装全局包

yarnglobaladd包名 ===》npmi-g包名

6、卸载全局包

yarnglobalremove包名 ===》npmuni-g包名

7、打包

yarn自定义的名字（build）===》 npmrun自定义的名字

二、webpack基本概念

1、作用

• 压缩代码

• 打包

• 提高浏览器打开速度

• 降级高级语法

2、环境准备

1  yarninit-y
2  yarnaddwebpackwebpack-cli-D  // 安装成开发版，只在开发阶段使用
3  在package.json中配置scripts
    "scripts":{
        "build":"webpack"  // 打包时执行yarn build
    }

3、基础使用

• 默认src/index.js 打包的入口文件

• 需要引入到入口文件才会被打包

• 执行package.json里的build命令，执行webpack打包命令

• 默认输出dist/main.js 的打包结果

• 再次打包，需要将新的文件引入到index.js中，执行yarn build

三、配置

1、配置入口和出口

// 与src同级下新建webpack.config.js文件
constpath=require('path');
module.exports= {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),//出口文件夹名
    filename: 'bundle.js',//出口文件名
  },
};

2、自动生成html文件

// 安装插件

yarnaddhtml-webpack-plugin-D
// webpack.json.js
constpath=require('path');
constHtmlWebpackPlugin=require('html-webpack-plugin');
​
module.exports= {
  entry: './src/main.js', // webpack入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [newHtmlWebpackPlugin({ // plugins插件配置
    template: './public/index.html'// 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件
  })],
};

3、打包css

• css被打包进js文件中，style-loader会把css代码插入到head下的style标签内

安装css-loader style-loader

yarnaddcss-loaderstyle-loader-D
webpack.config.js
module.exports= {
  entry: './src/main.js', // webpack入口
  module: { // 加载器配置
    rules: [ // 规则
      { // 一个具体的规则对象
        test: /\.css$/i, // 匹配.css结尾的文件，i 不区分大小写
        use: ["style-loader", "css-loader"], // 让webpack使用者2个loader处理css文件
        // 从右到左的, 所以不能颠倒顺序
        // css-loader: webpack解析css文件-把css代码一起打包进js中
        // style-loader: css代码插入到DOM上 (style标签)
      },
    ],
  },
};

4、打包less

安装less-loader less

yarnaddlessless-loader-D
webpack.config.js
module: { // 加载器配置
    rules: [ // 规则
      { // 一个具体的规则对象
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ],
  },

5、打包图片

webpack.config.js
module: { // 加载器配置
    rules: [ // 规则
      { // 图片文件的配置(仅适用于webpack5版本)
        test: /\.(gif|png|jpg|jpeg)/,
        type: 'asset'// 匹配上面的文件后, webpack会把他们当做静态资源处理打包
        // 如果你设置的是asset模式
        // 以8KB大小区分图片文件
        // 小于8KB的, 把图片文件转base64, 打包进js中
        // 大于8KB的, 直接把图片文件输出到dist下
        // 图片打包成base64，浏览器不用发请求，直接读取，速度快；图片太大，转换格式体积增大30%，得不偿失
      }
    ],
  },

6、处理字体图标

webpack.config.js
module: { // 加载器配置
    rules: [ // 规则
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset/resource', // 所有的字体图标文件, 都输出到dist下
        generator: { // 生成文件名字 - 定义规则
          filename: 'fonts/[name].[hash:6][ext]'// [ext]会替换成.eot/.woff
        }
      }
    ],
  },

7、babel降级高级js语法

yarnaddbabel-loader@babel/core@babel/preset-env-D
webpack.config.js
module: { // 加载器配置
    rules: [ // 规则
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 不去匹配这些文件夹下的文件
        use: {
          loader: 'babel-loader', // 使用这个loader处理js文件
          options: { // 加载器选项
            presets: ['@babel/preset-env'] // 预设: @babel/preset-env 降级规则-按照这里的规则降级我们的js语法
          }
        }
      }
    ],
  },

8、webpack开发服务器

• 起一个开发服务器, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用

• 打包在内存中, 速度快

• 自动更新打包变化的代码, 实时返回给浏览器显示

package.json
  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },
  webpack.config.js
  module.exports={
        devServer: {
        port: 3000, // 自定义端口号
  },
  }

配置目录

使用@代表当前文件所在的目录即src

在webpack.config.js中配置

resolve:{
    alias:{
        "@":path.join(__dirname,'./src/')
    }
}