webpack5入门

Webpack

五大模块

• Entry 入口，webpack打包的入口,默认为src文件夹下的index.js
• Output 出口，打包完成后输出的位置和命名
• Loader 翻译官，webpack只能识别js和json文件，所以处理css，less，img等内容需要用到loader将其转换为webpack能识别的内容
• Plugins 插件，将打包的东西按照自己的想法进行打包，比如说压缩等
• Mode 模式，分为development开发模式和production生产模式,分别针对的是开发的时候自己打包用的和上线的时候线上优化的

小结:执行顺序为：

1. 先看mode是哪种模式
2. 然后Entry找到入口，然后找到对应的内容
3. 如果有css或其他webpack识别不了的东西就用loader将其转换
4. 然后根据plugins将其进行压缩
5. 最后到将打包好的文件进行output导出
复制代码

基础配置

• 前提:node版本10以上
• npm init -y生成package.json
• npm install webpack webpack-cli
• 创建src文件夹,且创建index.js作为入口
• 创建build文件夹，且创建index.html作为引入打包文件的地方==(因为最初如果不配置的话,打包后的文件是在build里面webpack自己默认生成个main.js需要自己手动引入到index.html中的)==
• 运行指令 webpack ./src/index.js -o ./build/build.js –mode=development

小结:

webpack ./src/index.js -o ./build/build.js --mode=development
指令意思为
webpack 以./src/index.js作为入口
		-o 是-output的缩写，也就是出口
		以./build/build.js作为出口,默认为main.js
		打包环境为development(开发环境)
		
初始化文件目录
build
	|-build.js 打包后才有这个build.js文件
node.modules
src
	|-index.js
package-lock.json
package.json

作用:
举例: index.js里面import $ from 'jquery'
本来直接使用import浏览器会报错，但是经过webpack打包后，使用main.js就不会报错，而且可以实现我们想要的效果,但是此时还不能打包其他的，只能打包js和json,因为还没有配置
复制代码

webpack配置文件,webpack.config.js

• 作用：是webpack的自定义配置文件,可以指定webpack做哪些事情
• 文件位置：和src同级
• 所有的构建工具都是基于node.js运行的，所以我们在webpack.config.js里面使用commonjs规范导入导出

const path =require('path');
const htmlPlugin=require('html-webpack-plugin');
module.exports={
    entry:'./src/index.js',//入口
    output:{
        filename:'bb.js',//出口名称
        path:path.resolve(__dirname,'build')//出口地址
    },
    module:{},
    plugins:[
	    //自动生成html，并且自动引入打包文件
        new htmlPlugin()
    ],
    mode:'develpoment'
}
复制代码

loader 翻译官

• lodaer配置放在module这个对象中的rules数组里面，每一个配置都为一个对象
• 一个对象包括test和use，
  • test是匹配文件，使用正则，
    • test也可以换成exclude，test表示的是处理匹配到的所有，exclude表示的是处理除了匹配到的以外所有
    • test和exclude可以同时存在
  • use是转化规则，是数组，use的执行顺序是从后到前,是有依赖关系的,里面放的是loader,如果只有一项可以写成字符串
• options是对象，(独属于图片的)做一些配置项的,默认没有,可以不写

    module:{
        rules:[
//use从后到前面执行，有依赖关系
//针对css配置的loader
前提:npm i css-loader style-loader -D
            {test:/\.css$/,use:['style-loader','css-loader']},
//针对less配置的loader
前提 npm i style-loader less-loader css-loader -D
            {test:/\.css$/,use:['style-loader','css-loader','less-loader']},
//配置针对图片的loader
//虽然需要下载两个loader，但是配置的时候只需要配置url-loader即可，options里面的limit是大于当前8kb的话转换为base64
前提 npm i url-loader file-loader -D
            {test:/\.(jpg|png|gif)$/,loader:'url-loader',options:{
                limit:8*1024
            }},
//处理除了css、js、html以外的文件
可以用于处理icon
            {exclude:/.(css|js|html)$/,loader:'file-loader'}
        ]
    },
复制代码

图片打包中的options的一些可选配置项

limit : 8*1024   图片小于8kb转为base64
name : hash[10].[ext] 压缩后的图片名字用10个字，ext是他原本的后缀名，默认压缩完的图片名很长
esModule : true/false 开启或关闭es6Module模式
outputPath : 地址 将打包好的文件输出到指定文件夹,是字符串类型的地址,相对于build根目录的
复制代码

常见问题

• url-loader和html-loader一起使用有冲突
• 原因是url-loader默认使用es6模块解析，而html-module引入图片采用的是commonjs,es6Module在
• 解决方法:关闭url-loader里的es6模块化，让其使用commonjs规范解析

module.exports = {
    module: {
        rules: [{
                test: '/\.(png|jpg|jpeg)$/',
                use: 'url-loader',
                options:{
                    limit:8*1024,
                    esModule:false
                }
            },
            //处理html中的img资源
            {
                test: '/\.html$/',
                use: 'html-loader'
            }
        ]
    }
}
复制代码

eslint

• 作用：语法检测
• 检测范围:只检测自己写的代码，第三方库是不检查的
• 下载依赖 yarn add eslint-config-airbnb-base eslint-plugin-import eslint eslint-loader -D
• 设置检查规则：
  • package.json中eslintConfig中设置想要的语法规范
• 打包的时候，红色的是错误，黄色的是警告

> package.json
extends后写要继承的语法规范
  "eslintConfig": {
    "extends":"airbnb-base"
  }
复制代码

modules.exports={
rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'eslint-loader',
                options:{
                //自动修复语法规范
                    fix:true
                }
            }]
}
复制代码

plugins

• 作用:通过一些插件处理东西，不同插件有不同的作用
• 用法:都是通过先require导入，然后在plugins这个数组内，new的方式执行

==html-webpack-plugin插件==

• 作用: 实现自动生成html，并且引入打包文件
  • 可选配置项，注意，如果使用配置项，new的时候就要在()内传个对象
  • template:’文件地址’ 作用是以文件地址中的html为模板生成新的html

前提: npm i html-webpack-plugin -D
const htmlPlugin=require('html-wenpack-plugin');
module.exports={
	plugins:[
	        new htmlPlugin()
	    ],
//	plugins:[
//    new htmlPlugin({
//	       template:'./src/index.html'//配置项
//	       })
//	   ],
}
    
复制代码

==mini-css-extract-plugin插件==

• 作用：实现css的提取，单独把css提取成文件，用link标签引入
• 好处：正常loader使用的是style-loader打包在js中然后通过js添加style标签实现，会出现白屏效果
• 注意：特殊之处在于，不仅需要在plugins里new，还要在loader里使用名字.loader,且注意，不能与style-loader同时使用
• new的时候可以传配置项

//style-loader是放在js中，通过js添加style标签实现样式添加
module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }
}
//使用插件，把css提取出来，使用link标签导入
前提: npm install mini-css-extract-plugin -D
const miniPlugin = require('mini-css-extract-plugin');
module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: [miniPlugin.loader, 'css-loader']
        }]
    },
    plugins: [
        new miniPlugin({
        //将css打包到built文件下的css文件夹中的built.css里
		filename:'css/built.css'
		})
    ]
}
复制代码

==optimize-css-assets-webpack-plugin压缩css==

• 作用：压缩css
• 正常下载是npm i optimize-css-assets-webpack-plugin -D,但是下载不了，npm报错，可以使用yarn add -D optimize-css-assets-webpack-plugin

const OptimePlugin=require('optimize-css-assets-webpack-plugin');
module.exports={
plugins:[new OptimePlugin()]
}
复制代码

兼容性处理

• 作用：为了适应各个浏览器的兼容，自动给样式加前缀
• 前提：npm install postcss postcss-loader postcss-preset-env -D
• 他会根据package.json里面的browserslist进行兼容css处理

//老语法，高版本使用会报错
  // {
      //     loader:'postcss-loader',
      //     options:{
      //         ident:'postcss',
      //         plugins:()=>{
      //              require('postcss-preset-env')()
      //         }  
      //     }
      // }
新语法
    module: {
        rules: [{
                test: /\.css$/,
                use:[
                    miniPlugin.loader,
                    'css-loader',
                    // 'postcss-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                           postcssOptions:{
                               plugins:[
                                   [
                                       "postcss-preset-env",
                                       
                                   ]
                               ]
                           }
                        }
                    }
                ],
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    outputPath: 'image'
                }
            }
        ]
    },
复制代码

devServer 服务，实现自动化

• 作用：我们每一次更新代码都需要npm run build，显然很麻烦，这个时候就可以使用devServer来帮我们处理
• npm install webpack-dev-server -D
• 启动的需要npx webpack-dev-server 或者在package.json里scripts里自己配置一下就可以用npm run 的方式
• 需要了解的是，他并没有肉眼可见的更新文件，是自己在内存中进行更新的，而npx webpack是输出了文件，这是他们的区别

module.export={
   devServer:{
        //项目路径
        contentBase:path.resolve(__dirname,'build'),
        //启动gzip压缩
        compress:true,
        //端口号
        port:3000,
        //自动打开默认浏览器
        open:true
    }
}
复制代码

遇到问题

版本信息:
    "webpack": "^5.36.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"

报错 Error: Cannot find module 'webpack-cli/bin/config-yargs'
原因：webpack-dev-server版本不支持wepack5和webpack4
解决方法： 在package.json里的scripts里加个 "start": "webpack serve --mode development --env development"
执行成功:npm run start 
复制代码