欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

转-webpack学习笔记--整体配置结构

程序员文章站 2022-06-24 15:48:24
前端学习一段时间后,尤其是工作2-3年的小伙伴们在面试中都会害怕被问到webpack,我也害怕,每次都是临时抱佛脚,虽然自己会简单的配置webpack但是对webpack的原理还是一知半解,无意中看到这篇文章写的还不错,所以转发过来,也方便自己学习和记录。 const path = require( ......

前端学习一段时间后,尤其是工作2-3年的小伙伴们在面试中都会害怕被问到webpack,我也害怕,每次都是临时抱佛脚,虽然自己会简单的配置webpack但是对webpack的原理还是一知半解,无意中看到这篇文章写的还不错,所以转发过来,也方便自己学习和记录。

const path = require('path');
module.exports = {
// entry 表示 入口,webpack 执行构建的第一步将从 entry 开始,可抽象成输入。
// 类型可以是 string | object | array 
entry: './app/entry', // 只有1个入口,入口只有1个文件
entry: ['./app/entry1', './app/entry2'], // 只有1个入口,入口有2个文件
entry: { // 有2个入口
a: './app/entry-a',
b: ['./app/entry-b1', './app/entry-b2']
},

// 如何输出结果:在 webpack 经过一系列处理后,如何输出最终想要的代码。
output: {
// 输出文件存放的目录,必须是 string 类型的绝对路径。
path: path.resolve(__dirname, 'dist'),

// 输出文件的名称
filename: 'bundle.js', // 完整的名称
filename: '[name].js', // 当配置了多个 entry 时,通过名称模版为不同的 entry 生成不同的文件名称
filename: '[chunkhash].js', // 根据文件内容 hash 值生成文件名称,用于浏览器长时间缓存文件

// 发布到线上的所有资源的 url 前缀,string 类型
publicpath: '/assets/', // 放到指定目录下
publicpath: '', // 放到根目录下
publicpath: 'https://cdn.example.com/', // 放到 cdn 上去

// 导出库的名称,string 类型
// 不填它时,默认输出格式是匿名的立即执行函数
library: 'mylibrary',

// 导出库的类型,枚举类型,默认是 var
// 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ,
librarytarget: 'umd',

// 是否包含有用的文件路径信息到生成的代码里去,boolean 类型
pathinfo: true,

// 附加 chunk 的文件名称
chunkfilename: '[id].js',
chunkfilename: '[chunkhash].js',

// jsonp 异步加载资源时的回调函数名称,需要和服务端搭配使用
jsonpfunction: 'mywebpackjsonp',

// 生成的 source map 文件名称
sourcemapfilename: '[file].map',

// 浏览器开发者工具里显示的源码模块名称
devtoolmodulefilenametemplate: 'webpack:///[resource-path]',

// 异步加载跨域的资源时使用的方式
crossoriginloading: 'use-credentials',
crossoriginloading: 'anonymous',
crossoriginloading: false,
},

// 配置模块相关
module: {
rules: [ // 配置 loader
{ 
test: /\.jsx?$/, // 正则匹配命中要使用 loader 的文件
include: [ // 只会命中这里面的文件
path.resolve(__dirname, 'app')
],
exclude: [ // 忽略这里面的文件
path.resolve(__dirname, 'app/demo-files')
],
use: [ // 使用那些 loader,有先后次序,从后往前执行
'style-loader', // 直接使用 loader 的名称
{
loader: 'css-loader', 
options: { // 给 html-loader 传一些参数
}
}
]
},
],
noparse: [ // 不用解析和处理的模块
/special-library\.js$/ // 用正则匹配
],
},

// 配置插件
plugins: [
],

// 配置寻找模块的规则
resolve: { 
modules: [ // 寻找模块的根目录,array 类型,默认以 node_modules 为根目录
'node_modules',
path.resolve(__dirname, 'app')
],
extensions: ['.js', '.json', '.jsx', '.css'], // 模块的后缀名
alias: { // 模块别名配置,用于映射模块
// 把 'module' 映射 'new-module',同样的 'module/path/file' 也会被映射成 'new-module/path/file'
'module': 'new-module',
// 使用结尾符号 $ 后,把 'only-module' 映射成 'new-module',
// 但是不像上面的,'module/path/file' 不会被映射成 'new-module/path/file'
'only-module$': 'new-module', 
},
alias: [ // alias 还支持使用数组来更详细的配置
{
name: 'module', // 老的模块
alias: 'new-module', // 新的模块
// 是否是只映射模块,如果是 true 只有 'module' 会被映射,如果是 false 'module/inner/path' 也会被映射
onlymodule: true, 
}
],
symlinks: true, // 是否跟随文件软链接去搜寻模块的路径
descriptionfiles: ['package.json'], // 模块的描述文件
mainfields: ['main'], // 模块的描述文件里的描述入口的文件的字段名称
enforceextension: false, // 是否强制导入语句必须要写明文件后缀
},

// 输出文件性能检查配置
performance: { 
hints: 'warning', // 有性能问题时输出警告
hints: 'error', // 有性能问题时输出错误
hints: false, // 关闭性能检查
maxassetsize: 200000, // 最大文件大小 (单位 bytes)
maxentrypointsize: 400000, // 最大入口文件大小 (单位 bytes)
assetfilter: function(assetfilename) { // 过滤要检查的文件
return assetfilename.endswith('.css') || assetfilename.endswith('.js');
}
},

devtool: 'source-map', // 配置 source-map 类型
context: __dirname, // webpack 使用的根目录,string 类型必须是绝对路径

// 配置输出代码的运行环境
target: 'web', // 浏览器,默认
target: 'webworker', // webworker
target: 'node', // node.js,使用 `require` 语句加载 chunk 代码
target: 'async-node', // node.js,异步加载 chunk 代码
target: 'node-webkit', // nw.js
target: 'electron-main', // electron, 主线程
target: 'electron-renderer', // electron, 渲染线程

externals: { // 使用来自 javascript 运行环境提供的全局变量
jquery: 'jquery'
},

stats: { // 控制台输出日志控制
assets: true,
colors: true,
errors: true,
errordetails: true,
hash: true,
},

devserver: { // devserver 相关的配置
proxy: { // 代理到后端服务接口
'/api': 'http://localhost:3000'
},
contentbase: path.join(__dirname, 'public'), // 配置 devserver http 服务器的文件根目录
compress: true, // 是否开启 gzip 压缩
historyapifallback: true, // 是否开发 html5 history api 网页
hot: true, // 是否开启模块热替换功能
https: false, // 是否开启 https 模式
},

profile: true, // 是否捕捉 webpack 构建的性能信息,用于分析什么原因导致构建性能不佳
cache: false, // 是否启用缓存提升构建速度

watch: true, // 是否开始
watchoptions: { // 监听模式选项
// 不监听的文件或文件夹,支持正则匹配。默认为空
ignored: /node_modules/,
// 监听到变化发生后会等300ms再去执行动作,防止文件更新太快导致重新编译频率太高
// 默认为300ms 
aggregatetimeout: 300,
// 判断文件是否发生变化是不停的去询问系统指定文件有没有变化,默认每秒问 1000 次
poll: 1000
},
}