webpack5详细配置与介绍

webpack的基本概念：
微博pack时一种前端资源构建工具，一个静态模块打包器，再webpack看来，前端的所有资源，都会当作一个模块来处理，它将会根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle)
entry:入口指示，以哪个文件为入口七点开始打包，分析构建内部依赖图
output：输出指示，webpack打包后的资源bundles输出到哪里去，还有如何命名
loader：让微博pack可以处理那些非js文件
plugins:做一些功能更加强大的活，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量
模式：有开发模式和生产模式，开发模式时能够让代码本地运行的环境，生产环境配置，能够让代码优化上线运行的环境
webpack5
1.自动删除node.jspolyfills,自动停止填充这些核心模块，并专注于与前端兼容的模块（可以为node.js核心模块手动添加一个polyfill，错误消息将提示如何实现该目标）
2.chunk和模块ID，添加了长期缓存的新算法，在生产模式下面默认启动这些功能
3.Chunk ID
生产环境下面有必要的webpack内部有chunk命名规则
4.Tree Shaking
能够处理嵌套模块的tree shaking
5.webpack现在能够多个模块之前的关系
6.能够对commonjs的tree shaking
7.可以生成ES5和ES6代码
8.监视输出文件，监视重新构建时会只更新修改的文件，此次更新在第一次构建时会找到输出文件看是否有变化，再决定要不要输出文件

下面是一些详细的配置
1.entry

2.output

output:{
//文件名称（指定名称+目录）
filename:‘js/[name].js’,
//输出文件目录（将所有的公共资源的公共目录）
path:resolve(__dirname,‘build’),
//所有资源引入公共路径前缀 -->‘imgs/a.jpg’(这个是当前目录寻找）–>’/imgs/a.jpg’(这个是服务器地址下面寻找，更倾向于使用这个)
publicPath:’/’,//（生产环境用的比较多）
chunkFilename:’[name]_chunk.js’,//非入口的chunk的名称（import或者是options）如果没有这个就会以第一个为输出目录
library:’[name]’,//整个库向外面暴露的变量名,外部可以直接引入使用，一般是结合dll加某个库的单独打包，然后引入使用
libraryTarget:‘window’,//变量名添加到哪一个上browser
libraryTarget:‘global’,//变量名添加到哪一个上node
libraryTarget:‘commonjs’,

},

3.module的配置

module:{
rules:[
{test:/.css $KaTeX parse error: Expected 'EOF', got '}' at position 81: \dots','css-loader']}̲, {\dots$ /,
//不检查node_modules下的js文件
exclude:/node_modules/,
//只检查src中的js文件
include:resolve(__dirname,‘src’),
//优先执行
enforce:‘pre’,
//延后执行
// enforce:‘post’
loader:‘eslint-loader’}
]
}

4.resolve配置

//解析模块规则
resolve:{
//配置解析模块路径别名:可以简写路径，缺点是路径没有提示
alias:{
$css:resolve(__dirname,‘src/css’)
},
//配置省略文件路径的后缀名，所以不要取一样的文件名，否则会带来问题
extensions:[
‘.js’,‘json’,’.css’
],
//告诉webpack解析模块是去找哪一个目录,上一级上一级的找
// modules:[‘node_modules’],
//但是如果写的比较深的话，就很不方便，可以换一种写法，直接写路径
modules:[resolve(__dirname,’…/…/node_modules’),‘node_modules’]
}

5.devServer详细的配置

devServer:{
//运行代码的目录
contenBase:resolve(__dirname,‘build’),
//监视contentBase目录下的所有文件，一旦文件变化，就会reload
watchContentBase:true,
//需要忽略某一些文件
watchOptions:{
ignored:/node_modules/
},
//启动gzip压缩，可以让服务器更快，可以更快的看到效果
compress:true,
//端口号
port:5000,
//域名
host:‘localhost’,
//自动打开浏览器
open:true,
//开启HMR功能
hot:true,
//不要启动服务器日志信息
clientLoLever:‘none’,
//除了一些基本启动信息之外，其他的内容都不要显示
quiet:true,
//如果出现错误，不要全屏提示
overlay:true,
//服务器的代理 -->解决开发环境跨域问题
proxy:{
//一旦devServer（5000）服务器接收到/api/xxx的请求，就会把请求转发到另外一个服务器（3000）
‘/api’:{
target:“http://localhost:3000”,
//发送请求时，请求路径重写，将/api/xxx -->/xxx（去掉api)
pathRewrite:{
‘^/api’:’’
}
}
}
}

6.optimization配置

const TerserWebpackPlugin = require(‘terser-webpack-plugin’)
需要在生产环境下面使用
TerserWebpackPlugin，压缩html和css的打包，需要引入并且在顶部也需要书写

optimization:{
//提取公共代码，单独打包
splitChunks:{
chunks:‘all’,
//下面的都是默认值，只要上面的这一句就够了
minSize:30 *1024,//分割的chunk最小为30kb
maxSize:0,//最大没有限制
minChunks:1,//要提取的chunks最少被引用1次
maxAsyncRequests:5,//按需加载时并行加载文件的最大数量
maxInitRequests:3,//入口js文件最大并行请求数量
automaticNameDelimiter:’~’,//名称连接符
name:true,//可以使用命名规则
cacheGroups:{//分割chunk的组
//node_modules文件会被打爆到wendors组的chunk中 --> vendors~xxx.js
//要满足上面的规则，如：大小超过30kb，至少被引用一次
vendors:{
test:/[\]node_modules[\/]/,
priority:-10
},
default:{
//要提取的chunk至少被引用2次，
minChunks:2,
//优先级
priority:-20,
//如果当前要被打包的模块，和之前已经被提取的模块时同一个，就会复用，而不是重新打包模块，解决重复打包的问题
reuseExistingChunk:true
        }
        }


    },
    runtimeChunk:{
        //将当前模块记录其他模块的hash值单独打包成一个文件runtime,能够保证其他文件的持久化，否则会导致缓存失效
        //main.js文件里面不再储存这个hash值，而是另外一个文件runtime存储，这样当文件改变的时候，main文件也不会被改变
        name:entrypoint => 'runtime-${entrypoint.name}'
    },
    minizer:{
        //配置生产环境的压缩方案，js和css
        [new TerserWebpackPlugin({ //开启缓存
            cache:true,
            //开启多进程打包
            parallel:true,
            //启动sourse-map,否则会被压缩掉
            sourceMap:true
        })]


    }
}

webpack5详细配置与介绍

猜你喜欢