[JavaScript知识库]webpack文字介绍

webpack? 是一款静态模块的打包工具??

webpack 概念：作用： 分析、转义、压缩、打包代码

?使用流程：1.初始化工程：yarn init -y? ?（工程名不能是中文、大写、空格）

? ? ? ? ? ? ? ? ? ?2.装包：1.webpack? ? ? ? ? ?2.webpack-cli

? ? ? ? ? ? ? ? ? ?3.配置自定义脚本? ? ? ? 在package.json里面添加? "script":{"build:'webpack"}

? ? ? ? ? ? ? ? ? ?4.写默认的入口文件? ? ?创建src/index.js

? ? ? ? ? ? ? ? ? ?5.打包? ? ? ? ?运行使用yarn build?（npm run build）

? ? ? ? ? ? ? ? ? ?6.输出? ? ? ? ?dist/main.js?

基本配置? ? ?

1.入口/出口? ? ?配置文件：webpack.config.js? ? ? ?导出一个配置对象

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 入口：entry? ? ?可以是相对路径

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?出口：output? ?这里必须是绝对路径

? ? ? ? ? ? ? ? ? ? ?2.插件? ? ?html-webpack-plugin? ? ? ? 作用 ： 自动复制HTML文件到出口

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用法： 1.装包

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.导入到webpack.config.js? ?在里面写? ? ? ? ? ? ? ? ? ? ? ??

 ? const HtmlWebpackPlugin require('html-webpack-plugin')

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3.在plugins属性上配置下面代码：

plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html'
  })
]

? ?3.loader? ?

? ?(1)打包css? ? ? ?css-loader? ? ：解析css文件

? ? ? ? ? ? ? ? ? ? ? ? ?? style-loader? ?:? 将css-loader解析的内容插入到DOM中

? ? ? ? ? ? ? ? ? ? ? ? ? ?用法： 1.装包??

? ? ? ? ? ? ? ? ? ? ? ? ???2.在module属性上配置如下：

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

（2）打包less? ? ? ? less-loader :解析less文件

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?less? ? ? ?less-loader的内部依赖，把less转化成css

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?用法：? 在module属性上配置如下

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

（3）打包图片? ? ? ? 不用额外的包 ，内置的资源模块asset module

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用法： 在moudle属性上配置如下

module: {
  rules: [
    {
      test: /\.(png|gif|jpg|jpeg|bmp)$/i,
      type: 'asset'
    }
  ]
}

（4）打包字体? ? ? ? ? 不需要额外包，内置模块asset module

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用法：? ? 在module 属性上配置如下

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

（5）js降级? ? ? ? ?bable-loader? ? ?解析js文件? ?把高版本的js打包成低版本的。

? ? ? ? ? ? ? ? ? ? ? ? ? ? @bable/core? ? ?核心包，bable转义工具

? ? ? ? ? ? ? ? ? ? ? ? ? ? @bable/presets-env? ? ? 语法设置

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?用法? ? ? ? ? 在module属性上配置 如下

module: {
  rules: [
     { // 强烈不建议大家手写, 容易出错
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    }
  ]

开发服务器?

作用? ? ?：? ?在内存中开启一个服务器，每次更新打包时，不会输出到硬盘，只会在内存中更新，? ? ? ? ? ? ? ? ? ? ? ?大大缩短了打包时间。

用法? ? ?：? ? 1.装包? ?webpack-dev-server

? ? ? ? ? ? ? ? ? ? 2.配置自定义脚本? ? package.json? ? ??

"scripts": {
  "build": "webpack",
  "serve": "webpack serve"
}

? ? ? ? ? ? ? ? ? ? 3. 运用脚本? ? ?yarn serve

? ? ? ? ? ? ? ? ? ? 4.配置? ? ? ?mode? ? production? ? 1.线上环境打包时使用? ? ? 2.效率低

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? devServer? ? ?port? ? 端口号

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?open? ?自动打开浏览器