32、webpack详细配置
33、webpack详细配置之entry
entry: 入口起点
-
string --> './src/index.js',单入口
打包形成一个 chunk。 输出一个 bundle 文件。此时 chunk 的名称默认是 main
-
array --> ['./src/index.js', './src/add.js'],多入口
所有入口文件最终只会形成一个 chunk,输出出去只有一个 bundle 文件。
(一般只用在 HMR 功能中让 html 热更新生效)
-
object,多入口
有几个入口文件就形成几个 chunk,输出几个 bundle 文件,此时 chunk 的名称是 key 值
特殊用法:
entry: { // 最终只会形成一个chunk, 输出出去只有一个bundle文件。 index: ['./src/index.js', './src/count.js'], // 形成一个chunk,输出一个bundle文件。 add: './src/add.js' }
34、webpack详细配置之output
output: { // 文件名称(指定名称+目录) filename: 'js/[name].js', // 输出文件目录(将来所有资源输出的公共目录) path: resolve(__dirname, 'build'), // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg' publicPath: '/', chunkFilename: 'js/[name]_chunk.js', // 指定非入口chunk的名称 // chunkFilename指的是用js用import的情况下 打包指定非入口chunk的名称 },
35、webpack详细配置之module
module: { rules: [ // loader的配置 { test: /\.css$/, // 多个loader用use use: ['style-loader', 'css-loader'] }, { test: /\.js$/, // 排除node_modules下的js文件 exclude: /node_modules/, // 只检查src下的js文件 include: resolve(__dirname, 'src'), enforce: 'pre', // 优先执行 // enforce: 'post', // 延后执行 // 单个loader用loader loader: 'eslint-loader', options: {} // 指定配置选项 }, { // 以下配置只会生效一个 oneOf: [] } ] },
36、webpack详细配置之reslove(解析模块的规则)
// 解析模块的规则 resolve: { // 配置解析模块路径别名: 优点:当目录层级很复杂时,简写路径;缺点:路径不会提示 alias: { $css: resolve(__dirname, 'src/css') }, // 配置省略文件路径的后缀名(引入时就可以不写文件后缀名了) extensions: ['.js', '.json', '.jsx', '.css'], // 告诉 webpack 解析模块应该去找哪个目录 modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] }
37、webpack详细配置之devserve
devServer: { // 运行代码所在的目录 contentBase: resolve(__dirname, 'build'), // 监视contentBase目录下的所有文件,一旦文件变化就会reload watchContentBase: true, watchOptions: { // 忽略文件 ignored: /node_modules/ }, // 启动gzip压缩 compress: true, // 端口号 port: 5000, // 域名 host: 'localhost', // 自动打开浏览器 open: true, // 开启HMR功能 hot: true, // 不要显示启动服务器日志信息 clientLogLevel: 'none', // 除了一些基本信息外,其他内容都不要显示 quiet: true, // 如果出错了,不要全屏提示 overlay: false, // 服务器代理,--> 解决开发环境跨域问题 proxy: { // 一旦devServer(5000)服务器接收到/api/xxx的请求,就会把请求转发到另外一个服务器3000 '/api': { target: 'http://localhost:3000', // 发送请求时,请求路径重写:将/api/xxx --> /xxx (去掉/api) pathRewrite: { '^/api': '' } } } }
38、webpack详细配置之optimization(必须要在生产环境下才有意义)
contenthash 缓存会导致一个问题:修改 a 文件导致 b 文件 contenthash 变化。
因为在 index.js 中引入 a.js,打包后 index.js 中记录了 a.js 的 hash 值,而 a.js 改变,其重新打包后的 hash 改变,导致 index.js 文件内容中记录的 a.js 的 hash 也改变,从而重新打包后 index.js 的 hash 值也会变,这样就会使缓存失效。(改变的是a.js文件但是 index.js 文件的 hash 值也改变了)
解决办法:runtimeChunk --> 将当前模块记录其他模块的 hash 单独打包为一个文件 runtime,这样 a.js 的 hash 改变只会影响 runtime 文件,不会影响到 index.js 文件
output: { filename: 'js/[name].[contenthash:10].js', path: resolve(__dirname, 'build'), chunkFilename: 'js/[name].[contenthash:10]_chunk.js' // 指定非入口文件的其他chunk的名字加_chunk }, optimization: { splitChunks: { chunks: 'all', /* 以下都是splitChunks默认配置,可以不写 miniSize: 30 * 1024, // 分割的chunk最小为30kb(大于30kb的才分割) maxSize: 0, // 最大没有限制 minChunks: 1, // 要提取的chunk最少被引用1次 maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量为5 maxInitialRequests: 3, // 入口js文件最大并行请求数量 automaticNameDelimiter: '~', // 名称连接符 name: true, // 可以使用命名规则 cacheGroups: { // 分割chunk的组 vendors: { // node_modules中的文件会被打包到vendors组的chunk中,--> vendors~xxx.js // 满足上面的公共规则,大小超过30kb、至少被引用一次 test: /[\\/]node_modules[\\/]/, // 优先级 priority: -10 }, default: { // 要提取的chunk最少被引用2次 minChunks: 2, prority: -20, // 如果当前要打包的模块和之前已经被提取的模块是同一个,就会复用,而不是重新打包 reuseExistingChunk: true } } */ }, // 将index.js记录的a.js的hash值单独打包到runtime文件中 runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` }, minimizer: [ // 配置生产环境的压缩方案:js/css new TerserWebpackPlugin({ // 开启缓存 cache: true, // 开启多进程打包 parallel: true, // 启用sourceMap(否则会被压缩掉) sourceMap: true }) ] }