模块（module）

依赖图（depency graph）

devServer

        //devServer是默认把内容打包到内存 根据内存中的文件展示
        //指定加载内容的路径
        contentBase: resolve(__dirname, 'output'),
        //启动gzip压缩
        // compress:true,
        port: 3080,
        host: "30.45.128.162",
        liveReload: true,
        proxy: {
            '/api': {
                target: "https://api.github.com",
                pathRewrite:{
                    '^/api':''
                },
                //不能使用localhost作为主机名
                changeOrigin:true
            }
        }
    },
    target: 'web',//热更新只适用于web相关

css

webpack-config-js

const {resolve}=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const   miniCssExtractPlugin =  require('mini-css-extract-plugin')
const styleLintWebpackPlugin=require('stylelint-webpack-plugin')
const optimizeCssWebpackPlugin=require('optimize-css-assets-webpack-plugin')
module.exports={
    mode:'development',
    entry:{
        index: "./src/index.js"
    },
    output:{
        path:resolve(__dirname,'output'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                // use:['style-loader','css-loader'] 
                use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader'] 
            },
            {
                test:/\.less$/,
                // use:[
                //        // 如果单独打包成单个文件就不要用style-loader
                // 'style-loader',
                // 'css-loader',
                // 'less-loader'] 
                //postcss-loader 给样式属性添加浏览器前缀
                use:[miniCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader'] 

            }
        ]
    },
    plugins:[
      new HtmlWebpackPlugin({
        template: 'index.html'
      }),
       //css单独打包
      new miniCssExtractPlugin({
          filename:'css/[name].css'
      }),
       //css校验
      new styleLintWebpackPlugin({
          //指定需要校验的文件
          files:['src/css/*.{csss,less}']
      }),
      //压缩css
      new optimizeCssWebpackPlugin()
    ]
}

packjson

{
  "name": "webpackClass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "css-loader": "^5.2.4",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^9.1.0",
    "loader-utils": "^2.0.0",
    "mini-css-extract-plugin": "^1.6.0",
    "optimize-css-assets-webpack-plugin": "^6.0.0",
    "postcss-loader": "^6.1.0",
    "style-loader": "^2.0.0",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-webpack-plugin": "^2.2.0",
    "table": "^6.7.1",
    "tapable": "^2.2.0",
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {},
  "browserslist": [
    "last 1 version",
    "> 1%"
  ],
  "stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {
      "rule-empty-line-before": "never"
    }
  }
}

区分环境变量

自定义plugin


class Myplugin{
    constructor(options){
console.log(options,'插件配置')
    }

    //必须调用apply方法
    apply(compiler){
    //在钩子上挂在功能
    compiler.hooks.emit.tap('MyPlugin',Compilation=>{
        //Compilation是打包上下文

        for(const name in Compilation.assets){
            console.log(name,'name')
            if(name.endsWith('.css')){
                //获取处理前的内容
                const contents=Compilation.assets[name].source()

                //将原来的内容通过正则表达式删除注释
                const nocomments=contents.replace(/\/\*[\s\S]*?\*\//g,'')
                Compilation.assets[name]={
                    source:()=>nocomments,
                    size:()=>nocomments.length
                }

            }
        }
    })

    }
}

module.exports=Myplugin

自定义loader

总结

css ：

识别并转成js cssLoader，

打包到link标签 style-loader，

less文件识别：less-loader.

增加前缀兼容不同浏览器 postcss-loader 还有需要配置post-config.js 在里面加 autoprefixer（可以自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题）

单独打包成文件 mini-css-extract-plugin 不要和style-loader一起使用

压缩css代码 webpakck4 optimize-css-assets-webpack-plugin webpack5 css-minimizer-webpack-plugin

校验css代码 stylelint-webpack-plugin 配合packjson

"stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {
      "rule-empty-line-before": "never"
    }
  },

html

html-webpack-plugin 创建html模板

file-loader和url-loader url-loader封装了file-loader。url-loader不依赖于file-loade，file-loader可以用来帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片；使用url-loader打包的图片会给每张图片都生成一个随机的hash值作为图片的名字；，url可以将图片转成base64,减少http请求。过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

html-loader：将html文档以字符串形式导出,需要时,可以进行压缩，当导出是需要借助url-loader加载图片，所以要用同样鹅模块解析

babel-loader :转译 @babel/preset-env //只能转移基本语法，像promise就不能转换 polyfill就可以。。 '@babel/polyfill'转移所有的es6 会是文件变大 core-js按需转译

eslint-webpack-plugin 代码检查插件配合airbnb-base规范

copy-webpack-plugin 将src不需要处理的文件直接输出到目录中

clean-webpack-plugin 打包之前清楚历史文件