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   自动打开浏览器