详细一步到位，快速掌握webpack，无缝衔接webpack5

使用webpack准备

首先要安装有node，会使用npm 下载命令（这个非常简单，不会直接百度）

1.创建webapck项目

npm init
npm i webapck webapck-cli -D 下载webpack和cli

2.项目根目录创建webpack.config.js文件

开始webpackpz
核心5大模块
entry
output
loader
plugins
mode
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210422145215982.png

根据这5大模块进行配置，写入需要的配置

创建src文件夹

需要有一个入口js和html,位置可以自定义

写法规范

配置内容写在 module.exports导出对象里

//引入node中路径模块
const { resolve } = require('path')
//引入下载插件
//html处理
const HtmlWebpcakPliugin = require('html-webpack-plugin')
// css独立显示插件
const minicssextractplugin = require('mini-css-extract-plugin')
 module.exports = {
    entry: "./src/index.js",
    output: {
        //contenthash根据文件内容生成hash，不同文件hash不同
        filename: 'js/built[contenthash:10].js',//打包后的文件名，和路径
        path: resolve(__dirname, 'build')
        //__dirname 总是指向被执行 js 文件的绝对路径 ，当前路径的绝对路径
    },
    // loader配置，解决打包各类文件配置安装插件配置
    module: {
        rules: [
            {
                //匹配
                test: /\.css$/,
                //处理执行数序从下到上，后到前
                // use: [  
                //     //创建style标签，将css中样式资源插入进行，添加到head中生效
                //     'style-loader',
                //     //将css文件变成commonjs模块加载js中，内容是样式字符串
                //     'css-loader'
                // ]
                use: [
                    {
                        loader: minicssextractplugin.loader, //使用插件css文件单独打包配置
                        options: {
                            // 当前的css所在的文件相对于打包后的根路径dist的相对路径，解决打包后图片路径错误
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                test: /\.less$/, //其他css换为其他css名即可
                // use: [
                //     'style-loader',
                //     'css-loader',
                //     'less-loader'//需要下载less和less-loader,npm i less -D npm i less-loader -D
                // ]
                use: [
                    {
                        loader: minicssextractplugin.loader,
                        options: {
                            // 当前的css所在的文件相对于打包后的根路径dist的相对路径，解决打包后图片路径错误
                            publicPath: '../'
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            },
            {
            //js兼容处理
                test: /\.js$/,
                exclude: /node_modules/,//排除node_modules目录内容
                loader: 'babel-loader',//下载babel-loader和@babel/preset-env
                options: {
                    presets: [['@babel/preset-env', {
                        //   按需加载
                        useBuiltIns: 'usage',
                        // 指定core-js版本，下载core-js@3.10.1
                        corejs: {
                            version: 3
                        },
                        //指定兼容性到那个浏览器版本
                        targets: {
                            chrome: '60',
                            firefox: '60',
                            ie: '9',
                            safari: '10',
                            edge: '17'
                        }
                    }]],
                    //开启babel缓存，第二次构建，会读取之前缓存
                    cacheDirectory: true
                }
            },
            {
            //图片文件处理，添加匹配有用到的文件格式
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                // 下载url-loader file-loader
                //只使用1个loader直接写loader
                loader: 'url-loader',
                options: {
                    // 图片小于8kb会被base64处理，可以自定义
                    limit: 8 * 1024,
                    //因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs解析出错[object module]，解决：关闭url-loader的es6模块化，使用commonjs解析
                    esModule: false,
                    //文件重命名，hash:10取图片前10位，ext源文件扩展名
                    name: '[hash:10].[ext]',
                    //输出文件到指定文件夹
                    outputPath: 'imgs'
                }
            },
            {
            //语法检查，需在package.json中设置eslintconfig
            //"eslintConfig": {
            //"extends": "airbnb-base"
            //},
            //下载eslint 和 eslint-loader
               test:/\.js$/,
               exclude:/node_modules/,
               loader:'eslint-loader',
               options:{
               //自动修复eslint的错误
               fix:true
               }
            }，
            {
                test: /\.html$/,
                //处理html文件中img图片，负责引入img，被url-loaer处理,下载npm i html-withimg-loader -D
                loader: "html-withimg-loader"
            },
            {
                //排除css/js/html等，处理其他资源
                exclude: /\.(css|js|html|less|png|svg|jpg|jpeg|gif|json)$/i,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'static'
                }
            }
        ]
    },
    plugins: [
        // 下载npm i html-webpack-plugin -D
        // 默认创建空html,自动引入打包输出所有资源（js/css)，创建有结构的html文件
        new HtmlWebpcakPliugin({
            //复制'./src/index.html'文件，自动引入打包输出所有资源（js/css)
            template: './src/index.html'
        }),
        new minicssextractplugin(
            {
                //自定义输出文件路径和文件名
                filename: 'css/built[contenthash:10].css'
            }
        )
    ],
    // mode: 'development',//开发模式
    mode: 'production',//生产模式
    //开发服务器devserver自动化，自动编译，自动断开浏览器，自动刷新浏览器，用着感觉一般。在内存中编译打包，不会有任何输出
    //启动devserver：npx webpack-dev-server  ,下载npm i webpack-dev-server -D，无法启动安装npm install webpack-cli@3 -D降低版本
    devServer: {
        //构建后路径
        contentBase: resolve(__dirname, 'build'),
        //gzip压缩
        compress: true,
        //端口号
        port: 3001,
        //自动打开浏览器
        open: true,
        // 开启HMR功能，热刷新（一般）
        //修改webpack配置后需重启webpack
        hot: true
    },
    //source-map源代码构建映射技术；运行在浏览器错误映射，多种选择，开发环境推荐使用 cheap-module-source-map，生产环境推荐使用 hidden-source-map，当然可以直接使用source-map，
    devtool: 'cheap-module-source-map'
    
}

直接webpack命令打包

source-map

tree shaking去除无用代码

代码分割

单入口和多入口
optimization在导出对象下

懒加载，预加载


预加载兼容性一般不适合移动端，pc浏览器更适合

PWA(离线使用)

pwa渐进式网络应用程序（离线可用） 下载 workbox-webpack-plugin

servicework需运行到一个服务器上 npm i serve -g

serve -s build启动

const webpack = require('webpack')
const addassethtmlwebpackplugin = require('add-asset-html-webpack-plugin')
const { resolve } = require('path')
const HtmlWebpcakPliugin = require('html-webpack-plugin')
const webpack = require('webpack')
const addassethtmlwebpackplugin = require('add-asset-html-webpack-plugin')
// code_split
module.exports = {
    // entry: {
    //     //多入口：有一个入口，最终输出就有一个bundle
    //     index: './src/js/index.js',
    //     test: './src/js/test.js'
    // },
    entry: './src/js/index.js',
    output: {
        //[name]:取文件名
        filename: 'js/[name].[contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpcakPliugin({
            //复制'./src/index.html'文件，自动引入打包输出所有资源（js/css)
            template: './src/index.html'
        }), new webpack.DllReferencePlugin({
            manifest: resolve(__dirname, 'dll/manifest.json')
        }), new addassethtmlwebpackplugin({
            publicPath:'./',
            filepath: resolve(__dirname, 'dll/jquery.js')
        })
    ],
    // mode: 'development',
    mode: 'production',

}

入口js中写入

externals

不打包优化, key：value(包名)

多进程打包

dll

可以修改压缩配置

const terserwbpackplugin=require('terser-wbpack-plugin')

入口文件

使用import导入文件

import './css/index.css'
import './css/index.less'
import { mult } from './js/test'
// import './css/iconfont.css'
import printd from './js/print.js'

console.log(mult(2, 3))
function add(x, y) {
    return x + y;
}
console.log(add(1, 2));
function sum(...args) {
    return args.reduce((p, c) => p + c, 0)
}
console.log(sum(1, 2, 3, 4))

//servicework需运行到一个服务器上 npm i serve -g
//serve -s build启动
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js').then(() => {
            console.log('sw注册成功')
        }).catch(() => {
            console.log('sw注册失败')
        })
    })
}
console.log("性能优化")
if (module.hot) {
    // module.hot为true执行HMR
    module.hot.accept('./js/print.js', function () {
        // 监听printjs变化,单独热刷新
        // 执行回调
        printd()
    })
}

以上就webpack基本使用，一般使用5大核心模块，看写法规范里的就行，有其他的配置根据需求添加配置，

webpack5

webpack5优化了很多，可以简写，直接看配置

const HtmlWebpcakPliugin = require('html-webpack-plugin')
const { loader } = require('mini-css-extract-plugin')
const minicssextractplugin = require('mini-css-extract-plugin')

module.exports = {
    // 自动选择src/index.js作为入口
    // 自动输出dist文件夹
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: minicssextractplugin.loader
                    },
                    'css-loader'

                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: minicssextractplugin.loader
                    },
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                loader: 'url-loader',
                options: {
                    // 图片小于8kb会被base64处理
                    limit: 8 * 1024,
                    // 问题因为yrl-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                    //解析出错[object module]
                    //解决，关闭url-loader的es6模块化，使用commonjs解析
                    // esModule: false,
                    // //文件重命名，hash:10取图片前10位，ext源文件扩展名
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs'
                }
            },
            {
                //排除css/js/html等其他资源处理
                exclude: /\.(css|js|html|less|png|svg|jpg|jpeg|gif|json)$/i,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'static'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpcakPliugin({
            template: './src/index.html'
        }),
        new minicssextractplugin()
    ],
    mode: 'production',
    // mode: 'development',
    devtool: 'source-map'
}