webpack使用

1.webpack是什么

webpack是前端静态模块打包工具

主要作用：将（js[es6]/less/json/jpg/png等分块打包）

webpack可以处理js/json文件，不能处理css/img等资源，需要对应的loader来处理。

2.webpack五个核心概念

Entry

webpack以哪个文件为入口开始打包，分析构建内部依赖图

Output

输出Output指示wbpack打包后的资源bundles输出到哪里去

Loader

webpack只能理解javascript和json文件，这是webpack开箱即用的自带能力。loader能让webpack能够去处理类型的模块，并将他们转换成有效模块。

Plugins

相对loader使用范围更广，可以进行打包优化，资源管理，注入环境变量。

Mode

模式：

开发模式（development）

生产模式（production）：生产模式会压缩代码

3.常用loader

配置css的loader

  {
    test: /\.css$/,
    use: [
          'style-loader',
           'css-loader'
          ]
  }
  style-loader作用
  创建style标签，将js种的样式资源插入进去，添加到head中生效
  css-loader
  将css文件变成commonjs模块加载到js中，里面内容都是样式字符串
  use中loader的执行顺序是从右向左，从下到上

配置less的loader

// 处理less文件
{
  test:/\.less/,
  use:[
     'style-loader',
      // 将css文件转换成commonjs的模块
      'css-loader',
      // 将less转换成css
      'less-loadr'
]}

css兼容性配置

需要使用使用postcss-loader及postcss-preset-env

使用方式：

//webpack.config.js
rules：[
 {
                test: /\.less/,
                use: [
                    // 'style-loader',
                    // 将css文件转换成commonjs的模块
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // 处理css兼容性
                    {
                        loader:'postcss-loader',
                        options:{
                            //webpack4写法
                            // ident:'postcss',
                            // plugins: () => [
                            //     // postcss的插件
                            //     require('postcss-preset-env')()
                            // ]
                            //webpack5写法
                            postcssOptions:{
                                plugins:[
                                    ['postcss-preset-env']
                                ]
                            }
                           
                        }
                    },
                    // 将less转换成css
                    'less-loader',
                ]
            }
]
//package.json
//根据项目情况配置
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
//或者
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.1%",
      "not dead",
      "not op_mini all"
    ]
  }

配置图片资源

{
    test:/\.(jpg|png|gif))$/,
    //当只有一个loader时，key用loader，否则用url-loader
    loader:'url-loader',
    options:{
        //图片大小小于10mb时，将转换成base64格式
        /*
        *base64格式的优缺点
        *优点：减少网络请求（减轻服务器压力）
       *缺点：图片大小变大（文件请求速度变慢）
        */
        limit:10 * 1024,
        //关闭url-loader的es6模块化，使用commonjs模块化
        esModule:false,
        //图片重命名
        name:'[hase:10].[ext]'
    },
    type:'javascript/auto'
},
//处理html中的img图片
{
    test:/\.html$/,
    loader:'html-loader'
}

webpack5使用url-loader需要配置type：

 配置其他资源

iconfont、静态文件等等..

{
  exclude: /\.(less|js|png|jpg|gif|less|html|css)$/,
  loader: 'file-loader',
  options: {
          esModule: false,
          outputPath:'/iconfont'
            },
  type: 'javascript/auto'
}

4.plugin

html-webpack-plugin

作用：在指定目录下生成一个html文件并自动引入打包编译好的js及css文件

使用方式：

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins:[
        new htmlWebpackPlugin({})
    ]
}

mini-css-extract-plugin

作用：将css提取成单独的文件

注意：该插件需要在webpack 5及以上使用

使用方式：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module:{
    
    rules:[
        {
            test:/\.css$/,
            use:[
                    MiniCssExtractPlugin.loader,
                    css-loader
                ]
        }

    ]
},
plugins:[
  new MiniCssExtractPlugin({
       //配置文件名
       filename:'css/build.css'
   })
]

optimize-css-assets-webpack-plugin

作用：压缩css，less文件

使用方式：

const OptimizeCssAssetsWebpackPlugin = 
 require('optimize-css-assets-webpack-plugin')

plugins:[
    new OptimizeCssAssetsWebpackPlugin()
]

css-minimizer-webpack-plugin

作用：就像 optimize-css-assets-webpack-plugin 一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行

示例：

CssMinimizerWebpackPlugin | webpack 中文文档

5.devServer

devServer是开发服务器，用来实现开发自动化（自动化编译，自动打开浏览器，自动刷新浏览器）

devServer:{
 // contentBase:resolve(__dirname, './build'),
  //打包编译之后文件路径
  static:resolve(__dirname, './build'), //webpack5 及以上版本
  //启用gzip压缩
  compress:true,
  //端口号
  port:3000,
  //是否自动打开浏览器
  open:true,
  //自动刷新浏览器
  hot:true
}