关于javascript:vite虽香但webpack还是要学的

四个外围概念

entry(入口)

entry 是整个配置文件的入口，没有之一。

entry 有两种入口，四种配置。

两种入口

• 单文件入口
• 多文件入口

四种配置

• value 为字符串
• value 为对象
• value 为数组
• 函数

代码演示

「第一种配置（字符串），次要用在单页面利用」

const {resolve} = require('path')
module.exports = {entry:resolve(__dirname,'src/index.js')
} 

「第二种配置（对象），次要用在多页面利用」

const {resolve} = require('path')
module.exports = {
 entry:{test:resolve(__dirname,'src/index.js'),
 test2:resolve(__dirname,'src/index2.js')
 }
} 

「第三种配置（数组），这种配置可能比拟少用，也是用在单页面利用，这种配置次要将数组的 1 - n 项，打包到 0 项上，有时会用在 js 兼容，动静链 DLL 上」

const {resolve} = require('path')
module.exports = {entry:[resolve(__dirname,'src/index.js'),resolve(__dirname,'src/index2.js')],
} 

「第四种配置（函数），函数只有返回下面三种的其中一种就能够」

const {resolve} = require('path')
module.exports = {entry:()=>'./src/index.js',
} 

output

既然有入口，那就必定有进口啦！就如同人，要吃饭也要拉 *。这里的进口就是打包好的货色要把它放在哪里。

output 的罕用配置

• path(输入的地位，默认 dist 目录下)
• filename(输入文件的乳名，默认 main)
• pulibPath(指定打包后的文件应该在哪里援用，个别用在生产环境, 默认空)

代码演示

 const {resolve} = require('path')
module.exports = {
 output:{path:resolve(__dirname,'dist'),
 filename:'bundle.js',
 publicPath:'http:baidu.com'
 }
} 

「filename 的几种配置，能够间接像下面一样写死，也能够文件名加 hash 值动静设置，比方这样」

 module.exports = {
 output:{filename:'[name]_[hash].js'
 }
} 

哈希值

webpack 提供了以下几种哈希值：

• hash
• chunkhash (同一个 chunk 同一个 hash)
• contenthash (一个文件一个 hash)

module

module.rules 就是 loader 的配置地位，loader 用于解决一些代码的兼容性。

module.rules 的罕用配置

• test (loader 的匹配规定)
• exclude (排除哪些文件不须要匹配)
• include (只匹配哪些文件)
• loader (应用哪个 loader, 单个)
• use (应用哪些 loader, 多个)

代码演示

 module.exports = {
 module:{
 rules:[
 {
 test:/.html$/,
 exclude:/node_modelus/,
 include:/src/,
 loader:'html-loader',
 },
 {
 test:/.css/,
 use:['style-loader','css-loader']
 }
 ]
 }
} 

loader 的罕用配置

• loader (应用哪个 loader)
• options (传给 loader 的参数，loader 的不同，options 的参数也不同)

代码演示

module.exports = {
 module:{
     rules:{
         test:/.js$/,
         exclude:/node_modelus/,
         use:[
             // 没参数
             'thread-loader',
             // 有参数
             {
                 loader:'babel-loader',
                 options:{presets:['@babel/preset-env']
             }
            }
         ]
     }
   }
} 

plugins

plugins 是配置插件的地位，它是一个数组, 插件大多数状况是用于代码的优化。

插件没有没有对立的用法，因插件而异。硬是要说它们有相同之处那就是 new xxx

一些罕用的 loader

css 相干

• style-loader (解决 style 内联款式)
• css-loader（解决.css 文件）
• postcss-loader（解决 css 兼容）
• less-loader（解决.less 文件）
• sass-loader（解决.sass/.scss 文件）

let comment = [
 "style-loader",
 "css-loader",
 {
 loader:"postcss-loader",
 options:{
 postcssOptions:{plugins:['postcss-preset-env']
 }
 }
 }
]
module.exports = {
 module:{
 rules:[
 {
 test:/.css/,
 use:[...comment]
 },
 {
 test:/.less$/,
 use:[
 ...comment,
 'less-loader'
 ]
 }
 ]
 }
} 

js 相干

• babel-loader
• @babel/core
• @babel/preset-env
• @babel/polyfill

module.exports = {entry:['@babel/polyfill','./src/index.js']
 ...
 module:{
 rules:[
 {
 test:/.js$/,
 use:[
 {
 loader:'babel-loader',
 options:{presets:['@babel/preset-env']
 // 或者
 presets:[['env',{module:false}]]
 }
 }
 ]
 }
 ]
 }
} 

文件相干

• url-loader
• file-loader
• html-loader

 module.exports = {
 ...
 module:{
 rules:[
 {test:/.(png|jpg|gif)$/,
 use:[
 {
 loader:file-loader,
 options:{
 limit:4 *1024,
 name:'img/[name]_[hash:10].[ext]'
 }
 }
 ]
 },
 {
 test:/.html$/,
 loader:'html-loader'
 }
 ]
 }
 } 

vue 相干

• vue-loader
• vue-style-loader

 module.exports = {
 ...
 module:{
 rules:[
 {
 test:/.vue$/,
 loader:'vue-loader'
 },
 {
 test:/.css$/,
 use:[
 'vue-style-loader',
 'css-loader'
 ]
 }
 ]
 }
 } 

优化

开发环境

• HRM (热替换)
• webpack-dev-server（本地服务器）
• soure-map（调试）
• webpack-bundle-analyzer（打包生成代码块剖析视图）
• size-plugin（监控打包资源的体积变量化）
• speed-measure-webpack-plugin（剖析 loader 和 plugin 打包的耗时）

生产环境

体积优化

• css 提取（mini-css-extract-plugin）
• css 压缩（optimize-css-assets-webpack-plugin）
• html 压缩（html-webpack-plugin）
• externals（排除不须要被打包的第三方）
• js 压缩（production 模式主动开启）
• tree-shake (production 模式主动开启 (webpack4 限 EsModule;webpack5 不限 EsModule,CommonJs, 优良得很) )
• code-split (optimization)
• import(懒加载，预加载（预加载慎用））

打包速度优化

• 多线程打包（thread-loader、happyPack
• 动静链（DLL）
• babel 缓存（缓存 cacheDirectory）
• exclude / exclude (排除一些不须要编译的文件)
• module.noParse (排除不须要被 loader 编译的第三方库)

留神

• webpack 优化须要看本人的我的项目状况去隔靴搔痒，不是看到什么有意思就用下来；如果是这样会给本人挖坑，有可能也把本人给埋了。

其余

• resolve（配置模块如何解析）
• 更多配置，loader,plugin 等，自行看一下文档